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

510

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

Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.3k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11.4k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

1.9k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

7 months ago

659
Card
Card

Author:
Aman kumar

1 year ago

1.3k
credit card checkout

Author:
Antony

1 year ago

3.1k
Gradient card

Author:
TailwindFlex

2 years ago

8.9k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.4k
Confirmation model

Author:
Mr Robot

3 years ago

12.9k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

1 year ago

7.5k
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

3.4k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1