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.

Sunset in the mountains
The Coldest Sunset

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

#photography #travel #winter
Sunset in the mountains
The Coldest Sunset

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

#photography #travel #winter

Card with Horizontal line on title


Bootstrap card example using tailwind css with horizontal line below card title to distinguish design.

May 6, 2020
Posted by Admin

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.

14 May, 2020 It Jobs

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.

14 May, 2020 It Jobs

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.

Entertainment
May 6, 2020
Posted by Admin
Example Code:
<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>