Material 3 Cards [Light]

Cards that conform to Google's Material 3 design guidelines and themes

This tailwind example is contributed by Nick Girga, on 24-May-2025. Component is made with Tailwind v3.4.

Tailwind v3.4 1.3k 2

<div class="card max-w-[64mm] w-full max-h-[32mm] h-full">
            <span class="text-2xl font-bold">Filled Card</span>
        </div>

<div class="card card-elevated max-w-[64mm] w-full max-h-[32mm] h-full">
            <span class="text-2xl font-bold">Elevated Card</span>
        </div>

<div class="card card-outlined max-w-[64mm] w-full max-h-[32mm] h-full">
            <span class="text-2xl font-bold">Outlined Card</span>
        </div>

</div>

</body>

Related Examples

Responsive Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.8k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

1.8k
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Nick Girga

1 year ago

1.2k
ApexCodeStudios.com Celestara Profile Odyssey
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. Beautiful dual-style profile cards with cover images, stylish avatars, stats sections, social links, and follow buttons.

Apex Code Studios

5 months ago

254
Chats Message Screen in neomorphism
light/dark chat screen

Akram Khan

2 years ago

3k
sidebar dash
sidebar dash

Omer fils ELENGA

9 months ago

981
card simple

Raul antonio de la cruz hernandez

9 months ago

632
Product cards
Product cards for eCommerce

ehmasuk

1 year ago

1.4k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

farid

1 year ago

2.1k
split bg

Anonymous

1 year ago

1.1k
Article card

Sienna

3 years ago

13.4k
Portfolio form
Portfolio form

Joseph Melvin Kanu

2 years ago

3.5k