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

2 years ago

24.1k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 days ago

23
card profie
profile card

Author:
Aman kumar

1 year ago

4.1k
component

Author:
pablitodgb

6 months ago

1k
Profile card

Author:
Mr Robot

2 years ago

12.7k
Minimal Info cards

Author:
Gopi Yadav

2 years ago

10.6k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

4 months ago

543
Giftcard grid

Author:
ariaw

3 months ago

417
Product review card

Author:
Moriba Traore

3 years ago

15.2k
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.7k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

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

1 year ago

3.7k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components