Home
Nick Girga
Material 3 Cards [Light]

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 CSS v3.

Card

Author Nick Girga

666

Fork Fullscreen

<head>
    
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700&amp;display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
</head>

<body data-theme="light">
    
    
    <div class="flex flex-col items-center gap-4 py-16 h-screen">

<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

Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.8k
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

8 months ago

583
Author box

Author:
Mr Robot

3 years ago

12.2k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

1 year ago

1.5k
Créer une story
Créer une story

Author:
Omer fils ELENGA

1 month ago

315
Responsive Card

Author:
ariaw

10 months ago

656
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

842
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

5 days ago

22
Trending Users
Tailwind Flex Trending Users Card Design

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

1 year ago

3.9k
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

3 weeks ago

208
card
card section. find it makecomponents.com

Author:
makecomponents

1 year ago

2k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12