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.3k

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

22.6k
Card with social media share buttons

Author:
Computer guy

1 year ago

8.4k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

3 months ago

418
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

2.4k
Dynamic Google Card

Author:
Cristian

3 months ago

502
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

3 months ago

680
Professional Plan
Professional Plan

Author:
Muzammil Riaz

5 days ago

4
Card profile
profile card

Author:
Aman kumar

1 year ago

2.3k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

3.5k
Department Card

Author:
Ashok Kumar

11 months ago

1.3k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

2k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

11.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components