Tailwind Cards

Discover 17 Tailwind Cards available in Loopple

Card Project

Component from Riva Dashboard Tailwind Builder

<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-->
        <h3 class="text-white text-5xl/none font-semibold mr-2 tracking-[-0.115rem] font-display">92</h3>
        <!--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 Social

Component from Riva Dashboard Tailwind Builder

<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable">
  <!-- card body  -->
  <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
    <div class="m-0">
      <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/twitter.svg" alt="Logo Twitter">
    </div>
    <div class="flex flex-col my-7">
      <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">1.3k</h3>
      <div class="m-0">
        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
      </div>
    </div>
    <span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-base/none text-success bg-success-light rounded-lg border border-success">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
      </svg> 12% </span>
  </div>
  <!-- end card body  -->
</div>