Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Al Pacino
alpacino@left4code.com
Denzel Washington
denzelwashington@left4code.com
Johnny Depp
johnnydepp@left4code.com
Products
Oppo Find X2 Pro
Smartphone & Tablet
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Oppo Find X2 Pro
Smartphone & Tablet
Apple MacBook Pro 13
PC & Laptop

## Typography

## Heading

Show example code

# h1. Heading 1

## h2. Heading 2

### h3. Heading 3

#### h4. Heading 4

##### h5. Heading 5

###### h6. Heading 6

# h1. Heading 1

## h2. Heading 2

### h3. Heading 3

#### h4. Heading 4

##### h5. Heading 5

###### h6. Heading 6

      HTMLOpenTagdivHTMLCloseTag HTMLOpenTagh1 class="text-4xl font-medium leading-none"HTMLCloseTagh1. Heading 1HTMLOpenTag/h1HTMLCloseTag HTMLOpenTagh2 class="text-3xl font-medium leading-none mt-3"HTMLCloseTagh2. Heading 2HTMLOpenTag/h2HTMLCloseTag HTMLOpenTagh3 class="text-2xl font-medium leading-none mt-3"HTMLCloseTagh3. Heading 3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTagh4 class="text-xl font-medium leading-none mt-3"HTMLCloseTagh4. Heading 4HTMLOpenTag/h4HTMLCloseTag HTMLOpenTagh5 class="text-lg font-medium leading-none mt-3"HTMLCloseTagh5. Heading 5HTMLOpenTag/h5HTMLCloseTag HTMLOpenTagh6 class="font-medium leading-none mt-3"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagh1 class="text-4xl text-primary font-medium leading-none"HTMLCloseTagh1. Heading 1HTMLOpenTag/h1HTMLCloseTag HTMLOpenTagh2 class="text-3xl text-slate-600 dark:text-slate-500 font-medium leading-none mt-3"HTMLCloseTagh2. Heading 2HTMLOpenTag/h2HTMLCloseTag HTMLOpenTagh3 class="text-2xl text-success font-medium leading-none mt-3"HTMLCloseTagh3. Heading 3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTagh4 class="text-xl text-warning font-medium leading-none mt-3"HTMLCloseTagh4. Heading 4HTMLOpenTag/h4HTMLCloseTag HTMLOpenTagh5 class="text-lg text-danger font-medium leading-none mt-3"HTMLCloseTagh5. Heading 5HTMLOpenTag/h5HTMLCloseTag HTMLOpenTagh6 class="text-slate-500 font-medium leading-none mt-3"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Text Settings

Show example code
Example text
Example medium text
Example semibold text
Example bolder text
Example boldest text
Example uppercase text
Example lowercase text
Example capitalized text
Example cursive text

      HTMLOpenTagdivHTMLCloseTag HTMLOpenTagdiv class="font-normal"HTMLCloseTagExample textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagExample medium textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-semibold"HTMLCloseTagExample semibold textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-bold"HTMLCloseTagExample bolder textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-extrabold"HTMLCloseTagExample boldest textHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagdiv class="uppercase"HTMLCloseTagExample uppercase textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="lowercase"HTMLCloseTagExample lowercase textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="capitalize"HTMLCloseTagExample capitalized textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="normal-case"HTMLCloseTagExample cursive textHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Common Elements

Show example code
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text. This line of text is meant to be treated as no longer accurate. This line of text is meant to be treated as an addition to the document. This line of text will render as underlined This line of text is meant to be treated as fine print. This line rendered as bold text. This line rendered as italicized text.

      HTMLOpenTagdivHTMLCloseTagYou can use the mark tag to HTMLOpenTagmark class="p-1 bg-yellow-200"HTMLCloseTaghighlightHTMLOpenTag/markHTMLCloseTag text.HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdel class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as deleted text.HTMLOpenTag/delHTMLCloseTag HTMLOpenTags class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as no longer accurate.HTMLOpenTag/sHTMLCloseTag HTMLOpenTagins class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as an addition to the document.HTMLOpenTag/insHTMLCloseTag HTMLOpenTagu class="block mt-1"HTMLCloseTagThis line of text will render as underlinedHTMLOpenTag/uHTMLCloseTag HTMLOpenTagsmall class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as fine print.HTMLOpenTag/smallHTMLCloseTag HTMLOpenTagstrong class="block mt-1"HTMLCloseTagThis line rendered as bold text.HTMLOpenTag/strongHTMLCloseTag HTMLOpenTagem class="block mt-1"HTMLCloseTagThis line rendered as italicized text.HTMLOpenTag/emHTMLCloseTag

## Badges

Show example code
Basic Badge
1 2 3 4 5 6
Badge Sizes
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
Square Badge
1 2 3 4 5 6
Outline Badge
1 2 3 4 5

      HTMLOpenTagdiv class="font-medium"HTMLCloseTagBasic BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-primary text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full border text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-success text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-warning text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-danger text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-slate-100 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium mt-6"HTMLCloseTagBadge SizesHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-primary text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full border text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-success text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-warning text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-danger text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-slate-100 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-4"HTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-primary text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-success text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-warning text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-danger text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-slate-100 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-6"HTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-primary text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full border text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-success text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-warning text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-danger text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-slate-100 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium mt-10"HTMLCloseTagSquare BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-primary text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 border text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-success text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-warning text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-danger text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-slate-100 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium mt-6"HTMLCloseTagOutline BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-4"HTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-primary text-primary dark:border-primary mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-success text-success dark:border-success mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-warning text-warning dark:border-warning mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-danger text-danger dark:border-danger mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Separator

Show example code

      HTMLOpenTagdiv class="w-full border-t border-slate-200/60 dark:border-darkmode-400 border-dashed"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full border-t border-slate-200/60 dark:border-darkmode-400 mt-5"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Devider

Show example code
or

      HTMLOpenTagdiv class="w-full flex justify-center border-t border-slate-200/60 dark:border-darkmode-400 mt-2"HTMLCloseTag HTMLOpenTagdiv class="bg-white dark:bg-darkmode-600 px-5 -mt-3 text-slate-500"HTMLCloseTagorHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Links

Show example code
Example text Example medium text Example semibold text Example bolder text Example boldest text
Primary state Secondary state Success state Warning state Danger state

      HTMLOpenTagdivHTMLCloseTag HTMLOpenTaga href="" class="text-primary block font-normal"HTMLCloseTagExample textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-primary block font-medium"HTMLCloseTagExample medium textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-primary block font-semibold"HTMLCloseTagExample semibold textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-primary block font-bold"HTMLCloseTagExample bolder textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-primary block font-extrabold"HTMLCloseTagExample boldest textHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTaga href="" class="text-primary block"HTMLCloseTagPrimary stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-slate-600 dark:text-slate-500 block"HTMLCloseTagSecondary stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-success block"HTMLCloseTagSuccess stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-warning block"HTMLCloseTagWarning stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-danger block"HTMLCloseTagDanger stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Dark Mode