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

Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
alert
html , css

Hacker Development

1 year ago

2.1k
Form
form

Aman kumar

2 years ago

2.8k
offer card

ABDO-SY

1 year ago

1.5k
Simple Card section

Akram Khan

2 years ago

3.7k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Gaming Platforms Grid

ariaw

9 months ago

885
Smooth Scale & Float Reveal
An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

Juan D. Cortorreal

10 months ago

1k
User profile card with Cover Image

Noob

4 years ago

33.9k
Shop Now Amazon x
Product cards

ORGIN_DREAMS

1 year ago

1.8k
Product card for e-commerce
A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

Maxim

1 year ago

2.2k