Home
Sienna
Article card

Article card

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

Card

Author Sienna

9.9k

Fork Fullscreen

<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

Author:
Abhijit Sen

3 years ago

24.3k
Tailwind CSS Blog Card

Author:
Morris Muriuki Muthigani

6 months ago

315
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Author:
Nicole Shalom

8 months ago

1.2k
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4k
KPI Cards
estilo Shopify / Stripe

Author:
Raul antonio de la cruz hernandez

3 months ago

141
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.7k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Voucher Card

Author:
Adriano Monecchi

3 months ago

242
profile2

Author:
pablitodgb

8 months ago

820
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

11 months ago

1.3k
Responsive Features Section

Author:
ariaw

10 months ago

950
Image cards

Author:
Reuben Enahoro

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components