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
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Nick Girga

1 year ago

1.2k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Akram Khan

2 years ago

3.2k
Card Slider

Maxim

1 year ago

2.4k
Card template

Raul antonio de la cruz hernandez

9 months ago

541
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Joseph Barron

2 years ago

4.9k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

SHARIFUL ISLAM

1 year ago

2.8k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.8k
Info card

Samuel Dawson

3 years ago

10.7k