Tailwind Cards

Discover 17 Tailwind Cards available in Loopple

Card Visitors

Card Stats

Component from Soft UI Dashboard Tailwind Builder
<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 font-display"> $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 Project

Component from Soft UI Dashboard Tailwind Builder
<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 class="font-display">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 Bg Image

Card Statement

Card Illustration

Card Payment