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

515

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

Cards section - Sport

Author:
ABDO-SY

7 months ago

1.8k
News Feed

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

9 months ago

1.5k
Card
Jobs recommended for you LinkedIn Clone

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

6 months ago

795
Product features cards

Author:
Henrik R.

1 year ago

3.7k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5k
Food delivery ecommerce Card

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

9 months ago

1.5k
Floating capsule

Author:
Amazing Engineer

5 months ago

571
cards ecommerce
this cards have the best animation

Author:
ishimwe shadad

5 months ago

957
Blog Author Card

Author:
EliteAI Tools

9 months ago

1k
Product Details Card

Author:
ABDO-SY

8 months ago

1.8k
Card
Simple Card

Author:
Ashraf ali

8 months ago

1.4k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

10.4k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12