Project Card Layout Using Tailwind UI
The Tailwind project card layout is an appealing and responsive card layout built using custom classes from Tailwind CSS, designed to showcase project information with a modern touch.
card
Loading component...
270 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<section class="py-8">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="p-6 bg-white rounded-t">
<div class="">
<div class="w-10 h-10 mb-4 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M17.2809 2.95549C20.2499 3.1584 21.0363 5.29655 21.1199 5.5524L22.4167 5.64758C22.5466 5.64758 22.5858 5.82844 22.471 5.88421C21.148 6.60011 20.7438 8.05479 20.9814 9.00236C21.071 9.35974 21.2346 9.69179 21.3932 10.0224C21.6998 10.6637 22.0441 11.4403 22.1003 13.0033C22.2168 16.2423 19.5895 19.1778 16.3115 19.5956C17.4813 18.4088 18.1256 17.1518 18.4313 16.2207C19.0373 14.375 18.9393 12.9046 18.4857 11.781C18.0385 10.6732 17.2806 9.98965 16.7036 9.63988C15.021 8.62006 13.4846 8.54938 12.2604 8.878C12.7253 8.28379 13.1361 7.6768 13.4596 7.01357C14.0436 5.36416 13.3581 4.1657 12.7563 3.49525C12.5642 3.24941 12.695 2.83984 13.0607 2.83984C14.4703 2.83984 15.8737 2.8604 17.2809 2.95549ZM3.31872 19.1067C5.24275 16.9048 8.0315 13.7133 10.4814 10.9564C11.04 10.3277 13.2499 8.61858 16.2285 10.424C17.1068 10.9564 18.6589 12.589 17.5605 15.9349C16.7576 18.3804 13.1532 23.7301 1.80115 21.7784C1.5741 21.7394 1.29 21.4242 1.58312 21.0905C1.99794 20.6183 2.59759 19.932 3.31872 19.1067Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</div>
<div>
<h1 class="text-lg font-medium mb-1.5 text-gray-800">Applications</h1>
<p class="text-xs text-gray-400">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="p-6 bg-gray-200 rounded-b">
<div>
<div class="flex flex-row justify-between items center mb-5">
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Final Date</p>
<span class="inline-block py-1 px-2 bg-red-50 rounded-full text-xs text-red-500">30 August 2023</span>
</div>
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Budget</p>
<span class="inline-block py-1 px-2 bg-green-50 rounded-full text-xs text-green-500">$1400</span>
</div>
</div>
<div class="flex items-center justify-between mb-10">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover object-right"
src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=466&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover"
src="https://images.unsplash.com/photo-1611310424006-42cf1e064288?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1611695434398-4f4b330623e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1615813967515-e1838c1c5116?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<div
class="inline-flex -ml-2 items-center justify-center w-11 h-11 rounded-full bg-white text-xs font-medium text-indigo-500">
+5</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="relative w-3/4 h-1 mb-8 rounded-full bg-gray-50">
<div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-purple-500"></div>
</div>
<p class="mb-8 text-xs text-gray-600 font-bold mr-4">50%</p>
</div>
<div class="flex items-center ">
<button class="inline-block py-2 px-4 mr-2 bg-blue-600 rounded-lg text-sm text-white">80 Task</button>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="p-6 bg-white rounded-t">
<div class="">
<div class="w-10 h-10 mb-4 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M17.2809 2.95549C20.2499 3.1584 21.0363 5.29655 21.1199 5.5524L22.4167 5.64758C22.5466 5.64758 22.5858 5.82844 22.471 5.88421C21.148 6.60011 20.7438 8.05479 20.9814 9.00236C21.071 9.35974 21.2346 9.69179 21.3932 10.0224C21.6998 10.6637 22.0441 11.4403 22.1003 13.0033C22.2168 16.2423 19.5895 19.1778 16.3115 19.5956C17.4813 18.4088 18.1256 17.1518 18.4313 16.2207C19.0373 14.375 18.9393 12.9046 18.4857 11.781C18.0385 10.6732 17.2806 9.98965 16.7036 9.63988C15.021 8.62006 13.4846 8.54938 12.2604 8.878C12.7253 8.28379 13.1361 7.6768 13.4596 7.01357C14.0436 5.36416 13.3581 4.1657 12.7563 3.49525C12.5642 3.24941 12.695 2.83984 13.0607 2.83984C14.4703 2.83984 15.8737 2.8604 17.2809 2.95549ZM3.31872 19.1067C5.24275 16.9048 8.0315 13.7133 10.4814 10.9564C11.04 10.3277 13.2499 8.61858 16.2285 10.424C17.1068 10.9564 18.6589 12.589 17.5605 15.9349C16.7576 18.3804 13.1532 23.7301 1.80115 21.7784C1.5741 21.7394 1.29 21.4242 1.58312 21.0905C1.99794 20.6183 2.59759 19.932 3.31872 19.1067Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</div>
<div>
<h1 class="text-lg font-medium mb-1.5 text-gray-800">Applications</h1>
<p class="text-xs text-gray-400">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="p-6 bg-gray-200 rounded-b">
<div>
<div class="flex flex-row justify-between items center mb-5">
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Final Date</p>
<span class="inline-block py-1 px-2 bg-red-50 rounded-full text-xs text-red-500">30 August 2023</span>
</div>
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Budget</p>
<span class="inline-block py-1 px-2 bg-green-50 rounded-full text-xs text-green-500">$1400</span>
</div>
</div>
<div class="flex items-center justify-between mb-10">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover object-right"
src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=466&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover"
src="https://images.unsplash.com/photo-1611310424006-42cf1e064288?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1611695434398-4f4b330623e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1615813967515-e1838c1c5116?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<div
class="inline-flex -ml-2 items-center justify-center w-11 h-11 rounded-full bg-white text-xs font-medium text-indigo-500">
+5</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="relative w-3/4 h-1 mb-8 rounded-full bg-gray-50">
<div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-purple-500"></div>
</div>
<p class="mb-8 text-xs text-gray-600 font-bold mr-4">50%</p>
</div>
<div class="flex items-center ">
<button class="inline-block py-2 px-4 mr-2 bg-blue-600 rounded-lg text-sm text-white">80 Task</button>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="p-6 bg-white rounded-t">
<div class="">
<div class="w-10 h-10 mb-4 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M17.2809 2.95549C20.2499 3.1584 21.0363 5.29655 21.1199 5.5524L22.4167 5.64758C22.5466 5.64758 22.5858 5.82844 22.471 5.88421C21.148 6.60011 20.7438 8.05479 20.9814 9.00236C21.071 9.35974 21.2346 9.69179 21.3932 10.0224C21.6998 10.6637 22.0441 11.4403 22.1003 13.0033C22.2168 16.2423 19.5895 19.1778 16.3115 19.5956C17.4813 18.4088 18.1256 17.1518 18.4313 16.2207C19.0373 14.375 18.9393 12.9046 18.4857 11.781C18.0385 10.6732 17.2806 9.98965 16.7036 9.63988C15.021 8.62006 13.4846 8.54938 12.2604 8.878C12.7253 8.28379 13.1361 7.6768 13.4596 7.01357C14.0436 5.36416 13.3581 4.1657 12.7563 3.49525C12.5642 3.24941 12.695 2.83984 13.0607 2.83984C14.4703 2.83984 15.8737 2.8604 17.2809 2.95549ZM3.31872 19.1067C5.24275 16.9048 8.0315 13.7133 10.4814 10.9564C11.04 10.3277 13.2499 8.61858 16.2285 10.424C17.1068 10.9564 18.6589 12.589 17.5605 15.9349C16.7576 18.3804 13.1532 23.7301 1.80115 21.7784C1.5741 21.7394 1.29 21.4242 1.58312 21.0905C1.99794 20.6183 2.59759 19.932 3.31872 19.1067Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</div>
<div>
<h1 class="text-lg font-medium mb-1.5 text-gray-800">Applications</h1>
<p class="text-xs text-gray-400">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="p-6 bg-gray-200 rounded-b">
<div>
<div class="flex flex-row justify-between items center mb-5">
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Final Date</p>
<span class="inline-block py-1 px-2 bg-red-50 rounded-full text-xs text-red-500">30 August 2023</span>
</div>
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Budget</p>
<span class="inline-block py-1 px-2 bg-green-50 rounded-full text-xs text-green-500">$1400</span>
</div>
</div>
<div class="flex items-center justify-between mb-10">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover object-right"
src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=466&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover"
src="https://images.unsplash.com/photo-1611310424006-42cf1e064288?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1611695434398-4f4b330623e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1615813967515-e1838c1c5116?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<div
class="inline-flex -ml-2 items-center justify-center w-11 h-11 rounded-full bg-white text-xs font-medium text-indigo-500">
+5</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="relative w-3/4 h-1 mb-8 rounded-full bg-gray-50">
<div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-purple-500"></div>
</div>
<p class="mb-8 text-xs text-gray-600 font-bold mr-4">50%</p>
</div>
<div class="flex items-center ">
<button class="inline-block py-2 px-4 mr-2 bg-blue-600 rounded-lg text-sm text-white">80 Task</button>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="p-6 bg-white rounded-t">
<div class="">
<div class="w-10 h-10 mb-4 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M17.2809 2.95549C20.2499 3.1584 21.0363 5.29655 21.1199 5.5524L22.4167 5.64758C22.5466 5.64758 22.5858 5.82844 22.471 5.88421C21.148 6.60011 20.7438 8.05479 20.9814 9.00236C21.071 9.35974 21.2346 9.69179 21.3932 10.0224C21.6998 10.6637 22.0441 11.4403 22.1003 13.0033C22.2168 16.2423 19.5895 19.1778 16.3115 19.5956C17.4813 18.4088 18.1256 17.1518 18.4313 16.2207C19.0373 14.375 18.9393 12.9046 18.4857 11.781C18.0385 10.6732 17.2806 9.98965 16.7036 9.63988C15.021 8.62006 13.4846 8.54938 12.2604 8.878C12.7253 8.28379 13.1361 7.6768 13.4596 7.01357C14.0436 5.36416 13.3581 4.1657 12.7563 3.49525C12.5642 3.24941 12.695 2.83984 13.0607 2.83984C14.4703 2.83984 15.8737 2.8604 17.2809 2.95549ZM3.31872 19.1067C5.24275 16.9048 8.0315 13.7133 10.4814 10.9564C11.04 10.3277 13.2499 8.61858 16.2285 10.424C17.1068 10.9564 18.6589 12.589 17.5605 15.9349C16.7576 18.3804 13.1532 23.7301 1.80115 21.7784C1.5741 21.7394 1.29 21.4242 1.58312 21.0905C1.99794 20.6183 2.59759 19.932 3.31872 19.1067Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</div>
<div>
<h1 class="text-lg font-medium mb-1.5 text-gray-800">Applications</h1>
<p class="text-xs text-gray-400">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
</div>
</div>
</div>
<div class="p-6 bg-gray-200 rounded-b">
<div>
<div class="flex flex-row justify-between items center mb-5">
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Final Date</p>
<span class="inline-block py-1 px-2 bg-red-50 rounded-full text-xs text-red-500">30 August 2023</span>
</div>
<div>
<p class="text-xs text-gray-500 font-medium mb-1.5">Budget</p>
<span class="inline-block py-1 px-2 bg-green-50 rounded-full text-xs text-green-500">$1400</span>
</div>
</div>
<div class="flex items-center justify-between mb-10">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover object-right"
src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=466&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover"
src="https://images.unsplash.com/photo-1611310424006-42cf1e064288?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1611695434398-4f4b330623e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80"
alt="">
<img class="w-10 h-10 -ml-2 rounded-full object-cover object-top"
src="https://images.unsplash.com/photo-1615813967515-e1838c1c5116?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
alt="">
<div
class="inline-flex -ml-2 items-center justify-center w-11 h-11 rounded-full bg-white text-xs font-medium text-indigo-500">
+5</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="relative w-3/4 h-1 mb-8 rounded-full bg-gray-50">
<div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-purple-500"></div>
</div>
<p class="mb-8 text-xs text-gray-600 font-bold mr-4">50%</p>
</div>
<div class="flex items-center ">
<button class="inline-block py-2 px-4 mr-2 bg-blue-600 rounded-lg text-sm text-white">80 Task</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>