Tailwind Card
Horizontal tailwindcss Card
Here we present simple tailwindcss card, with image and a title. Here we present two cards in a row, further it can adjust as your need.
Horizontal Cards are so beautiful.
Horizontal Cards are so beautiful.
Vertical Cards
Here we present verical cards in tailwindcss, with title, cover image, short description and tags.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
Card with Horizontal line on title
Bootstrap card example using tailwind css with horizontal line below card title to distinguish design.
Bootstrap card example using tailwind css with horizontal line below card title to distinguish design.
Example code.
<div class="md:flex md:-mx-4">
<div class="w-full mb-2 md:w-1/2 md:mx-4 border rounded shadow-sm">
<a href="#" class="mb-4">
<img class="rounded" src="/assets/docs/master/image-01.jpg">
</a>
<div class="px-4 py-4">
<div>
<a href="#" class="font-semibold leading-tight text-2xl text-gray-800 hover:text-gray-800">
Bootstrap Card's Title
</a>
</div>
<hr class="border-gray-200 my-1 border-bottom-none" style="border-top-width:0">
<p class="text-gray-900">
Bootstrap card example using tailwind css with horizontal line below card title to distinguish design.
</p>
<div class='flex text-gray-700 text-sm '>
<div class="pr-3">May 6, 2020</div>
<div>Posted by <span class="text-red-400">Admin</span></div>
</div>
</div>
</div>
<div class="w-full mb-2 md:w-1/2 md:mx-4 border shadow-sm">
<a href="#" class="mb-4">
<img class="rounded" src="/assets/docs/master/image-01.jpg">
</a>
<div class="px-4 py-4">
<div>
<a href="#" class="font-semibold leading-tight text-2xl text-gray-800 hover:text-gray-800 ">
Bootstrap Card's Title
</a>
</div>
<hr class="border-gray-200 my-1 border-bottom-none" style="border-top-width:0">
<p class="text-gray-900">
Bootstrap card example using tailwind css with horizontal line below card title to distinguish design.
</p>
<div class='text-gray-700 text-sm font-bold'>
<a href="#" class="float-right">Read more...</a>
</div>
</div>
</div>
</div>
Horizontal cards.
Here is an example of horizontal card.
Horizontal Cards are so beautiful.
This is the example of horizontal cards using tailwind css. These examples are inspired by bootstrap cards design into different websites and others...
Horizontal Cards are so beautiful.
This is the example of horizontal cards using tailwind css. These examples are inspired by bootstrap cards design into different websites and others...
Background Image Card
Here is an example of card with background Image.
<div class="w-full h-40 bg-gray-100 " style="background-image:url('/assets/docs/master/image-01.jpg')">
<div class="flex items-end w-full h-full" style="background-color:rgba(0,0,0,0.6)">
<div class="px-4 py-2">
<div class="text-sm text-green-400 mb-2">
Entertainment
</div>
<div class="mb-2">
<a href="#" class="font-semibold leading-tight text-2xl text-gray-100 hover:text-gray-100">
Bootstrap Card's Title using Tailwind
</a>
</div>
<div class='flex text-gray-200 text-sm '>
<div class="pr-3">May 6, 2020</div>
<div>Posted by Admin</div>
</div>
</div>
</div>
</div>