Components Layout

Components

Avatar

Image

temp avatar
temp avatar
temp avatar

Text

J
J
J

L

M

S

temp avatar

John Doe

J

John Doe

Button

Default

Hover

Active

Disabled

Card

Default

Card title

Card description.

temp avatar

John Doe

Sep 6, 2024

Hover

Card title

Card description.

temp avatar

John Doe

Sep 6, 2024

Checkbox & radio

Color

Yellow

  • yellow-50 #FDF8E2

  • yellow-100 #FFF1AD

  • yellow-200 #FDE572

  • yellow-300 #FDDC35

  • yellow-400 #F5CE00

  • yellow-500 #DEAD12

  • yellow-600 #BD870E

  • yellow-700 #9C670E

  • yellow-800 #7A4D10

  • yellow-900 #7A4D10

Red

  • red #F75B51

  • red-50 #FDF2F2

  • red-100 #FFDADA

  • red-200 #FFBFBF

  • red-300 #FF8888

  • red-400 #FF5A5A

  • red-500 #DE3C3C

  • red-600 #B52121

  • red-700 #9C1D1D

  • red-800 #7A1515

  • red-900 #591010

Green

  • green-50 #EBF9F3

  • green-100 #CAF2E1

  • green-200 #96E9C6

  • green-300 #5BD69E

  • green-400 #2BC585

  • green-500 #0AB16B

  • green-600 #019356

  • green-700 #007041

  • green-800 #005934

  • green-900 #004025

Blue

  • blue-50 #F2F4FF

  • blue-100 #D9DFFF

  • blue-200 #BFCAFF

  • blue-300 #8799F7

  • blue-400 #5B73EE

  • blue-500 #3C57E5

  • blue-600 #1F3AC5

  • blue-700 #0E27A6

  • blue-800 #041A86

  • blue-900 #001166

Black

  • black #1D1D1F

  • black-50 #F5F5F5

  • black-100 #E6E6E9

  • black-200 #D9D9DE

  • black-300 #C5C5CD

  • black-400 #ABADB8

  • black-500 #8A8C97

  • black-600 #70727C

  • black-700 #5D606C

  • black-800 #46474D

  • black-900 #2D2E33

White

  • white #FFFFFF

Input

Pagination

1 1 1
Next Previous
Next Previous

Spacing

2px
4px
8px
16px
20px
24px
32px
48px
64px
96px
128px
256px

Table

Default

Text
Badge

Hover

Text
Badge

Tab

Default

Hover

Active

Toggle

Default

Hover

Active

Tooltip

Down-center

It’s a simple tooltip with useful information.

Right

It’s a simple tooltip with useful information.

Left

It’s a simple tooltip with useful information.

Up-center

It’s a simple tooltip with useful information.

Typography

Header

H1, 72 px

The five boxing wizards jump quickly.

H2, 64 px

The five boxing wizards jump quickly.

H3, 48 px

The five boxing wizards jump quickly.

H4, 40 px

The five boxing wizards jump quickly.

H5, 32 px

The five boxing wizards jump quickly.

H6, 28 px

The five boxing wizards jump quickly.

H7, 24 px

The five boxing wizards jump quickly.

H8, 20 px

The five boxing wizards jump quickly.

H9, 16 px

The five boxing wizards jump quickly.

H10, 14 px

The five boxing wizards jump quickly.

H11, 12 px

The five boxing wizards jump quickly.

Paragraph

P1, 20 px

The five boxing wizards jump quickly.

P2, 16 px

The five boxing wizards jump quickly.

P3, 14 px

The five boxing wizards jump quickly.

P4, 12 px

The five boxing wizards jump quickly.

Uppercase

U1, 18 px

The five boxing wizards jump quickly.

U2, 14 px

The five boxing wizards jump quickly.

U3, 12 px

The five boxing wizards jump quickly.

U4, 10 px

The five boxing wizards jump quickly.

Button

Btn1, 20 px

The five boxing wizards jump quickly.

Btn2, 18 px

The five boxing wizards jump quickly.

Btn3, 16 px

The five boxing wizards jump quickly.

Btn4, 14 px

The five boxing wizards jump quickly.

Tailwind CSS theme 
@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  --breakpoint-2xl: 2000px;

  --spacing-2px: 2px;
  --spacing-4px: 4px;
  --spacing-8px: 8px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-20px: 20px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-48px: 48px;
  --spacing-64px: 64px;
  --spacing-96px: 96px;
  --spacing-128px: 128px;
  --spacing-192px: 192px;
  --spacing-256px: 256px;
  --spacing-576px: 576px;
  --spacing-992px: 992px;
  --spacing-1200px: 1200px;
  --spacing-1280px: 1280px;
  --spacing-1600px: 1600px;
  --spacing-2000px: 2000px;

  --radius-2px: 2px;
  --radius-4px: 4px;
  --radius-8px: 8px;
  --radius-12px: 12px;
  --radius-16px: 16px;
  --radius-20px: 20px;
  --radius-24px: 24px;
  --radius-32px: 32px;
  --radius-48px: 48px;
  --radius-64px: 64px;
  --radius-96px: 96px;
  --radius-128px: 128px;
  --radius-192px: 192px;
  --radius-256px: 256px;

  --color-yellow-50: #FDF8E2;
  --color-yellow-100: #FFF1AD;
  --color-yellow-200: #FDE572;
  --color-yellow-300: #FDDC35;
  --color-yellow-400: #F5CE00;
  --color-yellow-500: #DEAD12;
  --color-yellow-600: #BD870E;
  --color-yellow-700: #9C670E;
  --color-yellow-800: #7A4D10;
  --color-yellow-900: #7A4D10;
  --color-red: #F75B51;
  --color-red-50: #FDF2F2;
  --color-red-100: #FFDADA;
  --color-red-200: #FFBFBF;
  --color-red-300: #FF8888;
  --color-red-400: #FF5A5A;
  --color-red-500: #DE3C3C;
  --color-red-600: #B52121;
  --color-red-700: #9C1D1D;
  --color-red-800: #7A1515;
  --color-red-900: #591010;
  --color-green-50: #EBF9F3;
  --color-green-100: #CAF2E1;
  --color-green-200: #96E9C6;
  --color-green-300: #5BD69E;
  --color-green-400: #2BC585;
  --color-green-500: #0AB16B;
  --color-green-600: #019356;
  --color-green-700: #007041;
  --color-green-800: #005934;
  --color-green-900: #004025;
  --color-blue-50: #F2F4FF;
  --color-blue-100: #D9DFFF;
  --color-blue-200: #BFCAFF;
  --color-blue-300: #8799F7;
  --color-blue-400: #5B73EE;
  --color-blue-500: #3C57E5;
  --color-blue-600: #1F3AC5;
  --color-blue-700: #0E27A6;
  --color-blue-800: #041A86;
  --color-blue-900: #001166;
  --color-black: #1D1D1F;
  --color-black-50: #F5F5F5;
  --color-black-100: #E6E6E9;
  --color-black-200: #D9D9DE;
  --color-black-300: #C5C5CD;
  --color-black-400: #ABADB8;
  --color-black-500: #8A8C97;
  --color-black-600: #70727C;
  --color-black-700: #5D606C;
  --color-black-800: #46474D;
  --color-black-900: #2D2E33;
  --color-white: #FFFFFF;

  --text-h1: 4.5rem;
  --text-h1--line-height: 1.6;
  --text-h1--letter-spacing: -0.05em;
  --text-h1--font-weight: 700;
  --text-h2: 4rem;
  --text-h2--line-height: 1.6;
  --text-h2--letter-spacing: -0.05em;
  --text-h2--font-weight: 700;
  --text-h3: 3rem;
  --text-h3--line-height: 1.6;
  --text-h3--letter-spacing: -0.05em;
  --text-h3--font-weight: 700;
  --text-h4: 2.5rem;
  --text-h4--line-height: 1.6;
  --text-h4--letter-spacing: -0.05em;
  --text-h4--font-weight: 700;
  --text-h5: 2rem;
  --text-h5--line-height: 1.6;
  --text-h5--letter-spacing: -0.05em;
  --text-h5--font-weight: 700;
  --text-h6: 1.75rem;
  --text-h6--line-height: 1.6;
  --text-h6--letter-spacing: -0.04em;
  --text-h6--font-weight: 700;
  --text-h7: 1.5rem;
  --text-h7--line-height: 1.6;
  --text-h7--font-weight: 700;
  --text-h8: 1.25rem;
  --text-h8--line-height: 1.6;
  --text-h8--font-weight: 700;
  --text-h9: 1rem;
  --text-h9--line-height: 1.6;
  --text-h9--font-weight: 700;
  --text-h10: 0.875rem;
  --text-h10--line-height: 1.6;
  --text-h10--font-weight: 700;
  --text-h11: 0.75rem;
  --text-h11--line-height: 1.2;
  --text-h11--font-weight: 700;
  --text-p1: 1.25rem;
  --text-p1--font-weight: 400;
  --text-p2: 1rem;
  --text-p2--font-weight: 400;
  --text-p3: 0.875rem;
  --text-p3--font-weight: 400;
  --text-p4: 0.75rem;
  --text-p4--font-weight: 400;
  --text-u1: 1.125rem;
  --text-u1--line-height: 1.75;
  --text-u1--font-weight: 400;
  --text-u2: 0.875rem;
  --text-u2--line-height: 1.85;
  --text-u2--font-weight: 400;
  --text-u3: 0.75rem;
  --text-u3--line-height: 1.85;
  --text-u3--font-weight: 400;
  --text-u4: 0.625rem;
  --text-u4--line-height: 1.85;
  --text-u4--font-weight: 400;
  --text-btn1: 1.25rem;
  --text-btn1--line-height: 1.6;
  --text-btn1--font-weight: 500;
  --text-btn2: 1.125rem;
  --text-btn2--line-height: 1.6;
  --text-btn2--font-weight: 500;
  --text-btn3: 1rem;
  --text-btn3--line-height: 1.6;
  --text-btn3--font-weight: 500;
  --text-btn4: 0.875rem;
  --text-btn4--line-height: 1.6;
  --text-btn4--font-weight: 500;
}