Cards
Professional card components made with TailwindCSS.
Basic card with description text and "read more" button
Screen Size:
<div class="rounded border md:shadow w-full md:w-64 overflow-hidden">
<div>
<a href="#">
<img class="object-cover" src="https://raw.githubusercontent.com/vuetailwind/storage/master/cards/card-1.jpg" alt="card 1" />
</a>
</div>
<div class="px-4 py-4">
<h3 class="font-semibold text-gray-900 mb-2 truncate">
Neque porro quisquam est qui dolorem
</h3>
<div class="text-sm text-gray-800">
Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. In dignissim mi vehicula magna vulputate, sed placerat ex. Sit amet mattis odio.
</div>
<div class="text-right mt-2">
<a href="#" class="py-2 text-indigo-600 text-xs uppercase hover:underline">Read More <span>→</span></a>
</div>
</div>
</div>
Card with author, avatar, date, and category
Screen Size:
<div class="rounded border md:shadow w-full md:w-64 overflow-hidden">
<div>
<a href="#">
<img class="object-cover" src="https://raw.githubusercontent.com/vuetailwind/storage/master/cards/card-4.jpg" alt="card 1" />
</a>
</div>
<div class="px-4 py-4">
<div class="text-xs text-gray-600 font-medium">
<a href="#" class="uppercase hover:underline">
recipe
</a>
<span class="mx-1">•</span>
<span>May 4, 2020</span>
</div>
<h3 class="font-semibold text-gray-800 my-2 hover:underline text-lg">
<a href="#">Brown cookies made with baking powder</a>
</h3>
<div class="text-sm text-gray-800">
<a href="#">
<img class="w-8 h-8 rounded-full inline-block mr-2" src="https://raw.githubusercontent.com/vuetailwind/storage/master/avatars/avatar-1.jpg" alt="Asian Girl Avatar" />
</a>
by <a href="#" class="hover:underline">Aki Lee</a>
</div>
</div>
</div>
Horizontal card with avatar, category, date, and a "read more" button
Screen Size:
<div class="rounded border md:shadow w-full overflow-hidden md:flex">
<div class="md:w-1/4">
<a href="#">
<img class="object-cover h-full w-full" src="https://raw.githubusercontent.com/vuetailwind/storage/master/cards/card-2.jpg" alt="card 1" />
</a>
</div>
<div class="md:w-3/4 max-w-full px-4 py-4">
<div class="text-xs text-gray-600 font-medium">
<a href="#" class="uppercase hover:underline">
Dogs
</a>
<span class="mx-1">•</span>
<span>May 4, 2020</span>
</div>
<h3 class="font-semibold text-gray-800 my-2 hover:underline text-lg">
<a href="#">A story about a good boy called Rex</a>
</h3>
<div class="mb-4 w-full text-gray-700">
Nulla lectus tellus, tempus quis malesuada quis, sagittis at od odio. In pharetra quam et lectus mollis sodales.
</div>
<div class="flex items-center justify-between">
<div class="text-sm text-gray-800 inline-flex items-center text-gray-700">
<a href="#">
<img class="w-8 h-8 rounded-full inline-block mr-2" src="https://raw.githubusercontent.com/vuetailwind/storage/master/avatars/avatar-boy-1.jpg" alt="Asian Girl Avatar" />
</a>
by <a href="#" class="ml-1 hover:underline">Aki Lee</a>
</div>
<div class="text-right">
<a href="#" class="py-2 text-indigo-600 text-xs uppercase hover:underline"> Read More <span>→</span> </a>
</div>
</div>
</div>
</div>
Product card with bold shadows
Screen Size:
<div class="w-full h-full md:h-auto grid grid-cols-1 md:grid-cols-3 gap-4 px-2 py-4">
<!-- item 1 -->
<div class="select-none mb-6 w-full">
<div class="relative pb-64">
<a href="#" class="cursor-pointer">
<img class="absolute w-full h-full rounded-lg object-cover border-b shadow-md cursor-pointer" src="https://images.unsplash.com/photo-1574920162043-b872873f19c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80" alt="product name" />
</a>
</div>
<div class="px-4 -mt-16 relative">
<div class="bg-white rounded-lg shadow-lg border">
<div class="p-5">
<div class="flex justify-between items-center">
<div class="opacity-75 text-xs">
<a class="hover:underline" href="#">
Apple
</a>
</div>
<span class="text-red-500 rounded-full bg-red-200 px-3 py-1 text-xs select-none">
Out Of Stock
</span>
</div>
<a class="text-gray-800 block mt-2 truncate hover:underline font-medium text-lg" href="#">
Apple Airpods
</a>
</div>
<div class="flex justify-between items-center pb-3 px-4">
<div>
<div class="text-gray-800 text-lg">
<span class="font-medium">$249</span>
</div>
</div>
<div>
<a class="btn-link flex items-center text-xs text-indigo-600 hover:underline" href="#">
View Product →
</a>
</div>
</div>
</div>
</div>
</div>
<!-- item 2 -->
<div class="select-none mb-6 w-full">
<div class="relative pb-64">
<a href="#" class="cursor-pointer">
<img class="absolute w-full h-full rounded-lg object-cover border-b shadow-md cursor-pointer" src="https://images.unsplash.com/photo-1491024579037-7484729a4420?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80" alt="product name" />
</a>
</div>
<div class="px-4 -mt-16 relative">
<div class="bg-white rounded-lg shadow-lg border">
<div class="p-5">
<div class="flex justify-between items-center">
<div class="opacity-75 text-xs">
<a class="hover:underline" href="#">
Beats
</a>
</div>
<span class="text-green-500 rounded-full bg-teal-200 px-3 py-1 text-xs select-none">
In Stock
</span>
</div>
<a class="text-gray-800 block mt-2 truncate hover:underline font-medium text-lg" href="#">
Beats Headsets
</a>
</div>
<div class="flex justify-between items-center pb-3 px-4">
<div>
<div class="text-gray-800 text-lg">
<span class="line-through opacity-75">$299</span>
<span class="font-medium">$249</span>
</div>
</div>
<div>
<a class="btn-link flex items-center text-xs text-indigo-600 hover:underline" href="#">
View Product →
</a>
</div>
</div>
</div>
</div>
</div>
<!-- item 3 -->
<div class="select-none mb-6 w-full">
<div class="relative pb-64">
<a href="#" class="cursor-pointer">
<img class="absolute w-full h-full rounded-lg object-cover border-b shadow-md cursor-pointer" src="https://images.unsplash.com/photo-1461141346587-763ab02bced9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80" alt="product name" />
</a>
</div>
<div class="px-4 -mt-16 relative">
<div class="bg-white rounded-lg shadow-lg border">
<div class="p-5">
<div class="flex justify-between items-center">
<div class="opacity-75 text-xs">
<a class="hover:underline" href="#">
Watch
</a>
</div>
<span class="text-green-500 rounded-full bg-teal-200 px-3 py-1 text-xs select-none">
In Stock
</span>
</div>
<a class="text-gray-800 block mt-2 truncate hover:underline font-medium text-lg" href="#">
Beats Headsets - with a really long model name
</a>
</div>
<div class="flex justify-between items-center pb-3 px-4">
<div>
<div class="text-gray-800 text-lg">
<span class="line-through opacity-75">$1500</span>
<span class="font-medium">$1000</span>
</div>
</div>
<div>
<a class="btn-link flex items-center text-xs text-indigo-600 hover:underline" href="#">
View Product →
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Designed and built with ♥ by Saleh Mir. Licensed under the MIT License.