0 10 20 30 40 50 60 70 80 90 100
0 10 20 30 40 50 60 70 80 90 100
0 10 20 30 40 50 60 70 80 90 100
0 10 20 30 40 50 60 70 80 90 100
20,20 20,40 20,60 20,80 40,20 40,40 40,60 40,80 60,20 60,40 60,60 60,80 80,20 80,40 80,60 80,80 0,0 -50,-50 50,-50 -50,50 50,50 ORIGIN SCALE 1:1 UNITS: % GRID: 40px MAJOR: 200px 90° 90° 90° 90°

Component Showcase

Buttons

Cards

Card image

Card Title

A card component with image and content

Most Popular

Premium

Card with badge and title

Primary Card

Card with primary color theme

Secondary Card

Card with secondary color theme

Accent Card

Card with accent color theme

Neutral Card

Card with neutral color theme

Badges

Primary
Secondary
Accent
Neutral
Info
Success
Warning
Error
Soft Primary
Soft Secondary
Soft Accent
Soft Info
Soft Success
Soft Warning
Soft Error
Outline Primary
Outline Secondary
Outline Accent
Outline Info
Outline Success
Outline Warning
Outline Error

Forms

Input

Textarea

Your bio
Optional

Select

Browsers Optional
Browsers Optional

Checkbox

Login options

Radio

File Input

Pick a file

Range

| | | | |
1 2 3 4 5

Toggle

Login options

Rating

Alerts

Progress

Progress Bar

Radial Progress

70%
70%
0%
20%
60%
80%
100%
0%
20%
60%
80%
100%
70%
70%
70%
70%
70%
70%
70%
70%

Loading

Loading Spinner

Skeleton

AI is thinking harder...

Tables

Name Status Role
John Doe
Active
 Admin
Jane Smith
Pending
 User
Bob Johnson
Inactive
 User

Avatars

Avatar
Avatar
AB
CD
EF

Layout

Stack

1
2
3
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C

Notification 1

You have 3 unread messages. Tap here to see.

Notification 2

You have 3 unread messages. Tap here to see.

Notification 3

You have 3 unread messages. Tap here to see.

Divider

content
OR
content
content
OR
content
content
content
content
OR
content
Default
Neutral
Primary
Secondary
Accent
Success
Warning
Info
Error
Start
Default
End
Start
Default
End

Steps

  • Register
  • Choose plan
  • Purchase
  • Receive Product
  • Register
  • Choose plan
  • Purchase
  • Receive Product
  • Register
  • Choose plan
  • Purchase
  • Receive Product
  • 😕Step 1
  • 😃Step 2
  • 😍Step 3
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
  • Step 6
  • Step 7
  • Fly to moon
  • Shrink the moon
  • Grab the moon
  • Sit on toilet
  • start
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • end

Timeline

  • 2024
    Project Started
  • 2025
    Current Year

Interactive Elements

Link

Click me

Tailwind CSS resets the style of links by default.
Add "link" class to make it look like a normal link again.

Click me Click me Click me Click me Click me Click me Click me Click me

Media

Mask

Other

Countdown

59 59 59 59 10 h 24 m 59 s 10h 24m 59s 10 : 24 : 59 10: 24: 59
15 days
10 hours
24 min
59 sec
15 days
10 hours
24 min
59 sec
15 days
10 hours
24 min
59 sec
15 days
10 hours
24 min
59 sec
15 days
10 hours
24 min
59 sec
15 days
10 hours
24 min
59 sec

Chat

Hello! How are you?
I'm doing great, thanks!
That's wonderful to hear!

Join

new