Home
Sienna
Article card

Article card

This tailwind example is contributed by Sienna, on 12-Dec-2022. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Sienna

12.1k

Fork Fullscreen

<div class="p-4 max-w-md">
    <div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
        <img class="h-48 w-full object-cover object-center" src="https://dummyimage.com/720x400" alt="blog">
        <div class="p-6">
            <h2 class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">CATEGORY</h2>
            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">The Catalyzer</h1>
            <p class="leading-relaxed mb-3">
                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing
                tousled waistcoat.
            </p>
            <div class="flex items-center flex-wrap">
                <a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">
                    Learn More
                    <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                </a>
                <span class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                    1.2K
                </span>
                <span class="text-gray-400 inline-flex items-center leading-none text-sm">
                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
                    </svg>6
                </span>
            </div>
        </div>
    </div>
</div>

Related Examples

Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

5 days ago

13
Simple card layout with image

Author:
Leon Bachmann

2 years ago

10.2k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

1 month ago

215
Beautiful card design with image

Author:
Brandon D

2 years ago

12.6k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

2k
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
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

11.4k
Feature Card
Elevated card

Author:
Prajwal Hallale

2 years ago

10.2k
Shoping Cart Popup

Author:
ABDO-SY

2 months ago

457
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

1 week ago

17
card
best responsive tailwind card

Author:
irahoza daniel

1 week ago

10

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components