Article card

This tailwind example is contributed by Sienna, on 18-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 10.7k 17

<article class="flex flex-col shadow max-w-[400px]">
    
    <a href="#" class="hover:opacity-75">
        <img src="https://source.unsplash.com/collection/1346951/1000x500?sig=3">
    </a>
    <div class="bg-white flex flex-col justify-start p-6">
        <a href="#" class="text-blue-700 text-sm font-bold uppercase pb-4">Sports,Fitness</a>
        <a href="#" class="text-3xl font-bold hover:text-gray-700 pb-4">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</a>
        <p href="#" class="text-sm pb-3">
            By <a href="#" class="font-semibold hover:text-gray-800">David Grzyb</a>, Published on October 22nd, 2019
        </p>
        <a href="#" class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis porta dui. Ut eu
            iaculis massa. Sed ornare ligula lacus, quis iaculis dui porta volutpat. In sit amet posuere magna..</a>
        <a href="#" class="uppercase text-gray-800 hover:text-black">
            Continue Reading
        </a>
    </div>
</article>

Related Examples

Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Card with Thumbnail
Post card with image

Mr Robot

4 years ago

12k
Card
Card

Aman kumar

2 years ago

2.2k
SimpleGrid

wtfbrh

1 year ago

1.7k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Abhiraj

1 year ago

2.9k
card
best responsive tailwind card

irahoza daniel

1 year ago

1.9k
card2
card2

pablitodgb

1 year ago

965
Card KPI
Targetas ahora con un grafico

Raul antonio de la cruz hernandez

1 year ago

1.3k
3d card
the Best 3D card with tailwind css

irahoza daniel

1 year ago

1.5k
Responsive Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.8k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Image card

Laurits

3 years ago

18.3k