Home
Framework
Theme
All
197
Typography
14
Sidebars
6
Navbars
13
Tables
8
Components
7
Cards
17
Cards Section
7
Projects Section
3
Teams Section
3
Profiles Section
5
Tables Section
3
Charts
7
Forms
7
Charts Section
3
Testimonials
7
Contents
6
Headers
11
Http Codes
4
Logo Areas
6
Contact Us
6
Stats
6
Authentication
5
Pricing
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Blogs
2
General
1
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><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><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><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>
