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

105

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

Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.3k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

12k
File Upload

Author:
Rajesh Maheshwari

3 months ago

546
card profie
profile card

Author:
Aman kumar

1 year ago

3.7k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

14.8k
card
simple card for begin

Author:
Omer fils ELENGA

4 months ago

1.1k
Confirmation model

Author:
Mr Robot

2 years ago

12.6k
Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

2 years ago

19.5k
cards
cards with background animation

Author:
Anonymous

1 year ago

2.3k
Features grid

Author:
Sophia Baker

2 years ago

9.7k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

11 months ago

2.2k
Card with social media share buttons

Author:
Computer guy

1 year ago

8.5k

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