Tailwind Cards

Discover 17 Tailwind Cards available in Loopple

Card Bg Image

Card Stats

<div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border mb-4 draggable">
  <div class="flex-auto p-4">
    <div class="flex flex-row -mx-3">
      <div class="flex-none w-2/3 max-w-full px-3">
        <div>
          <p class="mb-0 font-sans font-semibold leading-normal text-sm">Today's Money</p>
          <h5 class="mb-0 font-bold"> $53,000 <span class="leading-normal text-sm font-weight-bolder text-lime-500">+55%</span>
          </h5>
        </div>
      </div>
      <div class="px-3 text-right basis-1/3">
        <div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
          <i class="ni ni-money-coins leading-none text-lg relative top-3.5 text-white"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Card Statement

Card Project

<div class="relative flex flex-col min-w-0 break-words bg-white border-0 shadow-soft-xl px-3 py-3 rounded-2xl bg-clip-border">
    <div class="relative">
      <a class="block shadow-xl rounded-2xl">
        <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/home-decor-1.jpg" alt="img-blur-shadow" class="max-w-full shadow-soft-2xl rounded-2xl" />
      </a>
    </div>
    <div class="flex-auto px-1 pt-6">
      <p class="relative z-10 mb-2 leading-normal text-transparent bg-gradient-to-tl from-gray-900 to-slate-800 opacity-60 text-sm bg-clip-text">Project #2</p>
      <a href="javascript:;">
        <h5>Modern</h5>
      </a>
      <p class="mb-6 leading-normal text-sm">As Uber works through a huge amount of internal management turmoil.</p>
      <div class="flex items-center justify-between">
        <button type="button" class="inline-block px-8 py-2 mb-0 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer leading-pro ease-soft-in text-xs hover:scale-102 active:shadow-soft-xs tracking-tight-soft border-fuchsia-500 text-fuchsia-500 hover:border-fuchsia-500 hover:bg-transparent hover:text-fuchsia-500 hover:opacity-75 hover:shadow-none active:bg-fuchsia-500 active:text-white active:hover:bg-transparent active:hover:text-fuchsia-500">View Project</button>
        <div class="mt-2">
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-1.jpg" />
          </a>
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-2.jpg" />
          </a>
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-3.jpg" />
          </a>
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-4.jpg" />
          </a>
        </div>
      </div>
    </div>
  </div>

Card Payment

Card Illustration

Card Map

Card Project

<div class="relative flex flex-col min-w-0 break-words bg-green-500 border-0 bg-clip-border rounded-2xl mb-5 draggable">
    <!-- card header -->
    <div class="px-9 pt-5 flex justify-between items-stretch flex-wrap min-h-[70px] pb-0 bg-transparent">
        <div class="flex flex-col items-start justify-center m-2 ml-0 font-medium text-xl/normal text-dark">
        <!--begin::Amount-->
        <span class="text-white text-5xl/none font-semibold mr-2 tracking-[-0.115rem]">92</span>
        <!--end::Amount-->

        <!--begin::Subtitle-->
        <span class="pt-1 font-medium text-white/80 text-lg/normal">Completed Tasks</span>
        <!--end::Subtitle-->
        </div>
    </div>
    <!-- card body  -->
    <div class="flex items-end flex-auto py-8 pt-0 px-9 ">
        <!--begin::Progress-->
        <div class="flex flex-col items-center w-full mt-3">
        <div class="flex justify-between w-full mt-auto mb-2 font-semibold text-white/80 text-lg/normal">
            <span class="mr-4">12 Pending</span>
            <span>85%</span>
        </div>

        <div class="mx-3 rounded-2xl h-[8px] w-full bg-white/20">
            <div class="rounded-2xl bg-white w-[85%] h-[8px]"></div>
        </div>
        </div>
        <!--end::Progress-->
    </div>
    <!-- end card body  -->
</div>

Card Activities

Card Visitors