Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Kate Winslet
katewinslet@left4code.com
Leonardo DiCaprio
leonardodicaprio@left4code.com
John Travolta
johntravolta@left4code.com
Leonardo DiCaprio
leonardodicaprio@left4code.com
Products
Oppo Find X2 Pro
Smartphone & Tablet
Apple MacBook Pro 13
PC & Laptop
Nikon Z6
Photography
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="mt-3 text-3xl font-medium leading-none"HTMLCloseTag
                                        h2. Heading 2
                                    HTMLOpenTag/h2HTMLCloseTag
                                    HTMLOpenTagh3 class="mt-3 text-2xl font-medium leading-none"HTMLCloseTag
                                        h3. Heading 3
                                    HTMLOpenTag/h3HTMLCloseTag
                                    HTMLOpenTagh4 class="mt-3 text-xl font-medium leading-none"HTMLCloseTag
                                        h4. Heading 4
                                    HTMLOpenTag/h4HTMLCloseTag
                                    HTMLOpenTagh5 class="mt-3 text-lg font-medium leading-none"HTMLCloseTag
                                        h5. Heading 5
                                    HTMLOpenTag/h5HTMLCloseTag
                                    HTMLOpenTagh6 class="mt-3 font-medium leading-none"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-5"HTMLCloseTag
                                    HTMLOpenTagh1 class="text-4xl font-medium leading-none text-primary"HTMLCloseTag
                                        h1. Heading 1
                                    HTMLOpenTag/h1HTMLCloseTag
                                    HTMLOpenTagh2 class="mt-3 text-3xl font-medium leading-none text-slate-600 dark:text-slate-500"HTMLCloseTag
                                        h2. Heading 2
                                    HTMLOpenTag/h2HTMLCloseTag
                                    HTMLOpenTagh3 class="mt-3 text-2xl font-medium leading-none text-success"HTMLCloseTag
                                        h3. Heading 3
                                    HTMLOpenTag/h3HTMLCloseTag
                                    HTMLOpenTagh4 class="mt-3 text-xl font-medium leading-none text-warning"HTMLCloseTag
                                        h4. Heading 4
                                    HTMLOpenTag/h4HTMLCloseTag
                                    HTMLOpenTagh5 class="mt-3 text-lg font-medium leading-none text-danger"HTMLCloseTag
                                        h5. Heading 5
                                    HTMLOpenTag/h5HTMLCloseTag
                                    HTMLOpenTagh6 class="mt-3 font-medium leading-none text-slate-500"HTMLCloseTag
                                        h6. Heading 6
                                    HTMLOpenTag/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.

                    HTMLOpenTagdivHTMLCloseTag
                                    You can use the mark tag to
                                    HTMLOpenTagmark class="bg-yellow-200 p-1"HTMLCloseTaghighlightHTMLOpenTag/markHTMLCloseTag text.
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdel class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as deleted text.HTMLOpenTag/delHTMLCloseTag
                                HTMLOpenTags class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as no longer
                                    accurate.HTMLOpenTag/sHTMLCloseTag
                                HTMLOpenTagins class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as an addition to the
                                    document.HTMLOpenTag/insHTMLCloseTag
                                HTMLOpenTagu class="mt-1 block"HTMLCloseTagThis line of text will render as underlinedHTMLOpenTag/uHTMLCloseTag
                                HTMLOpenTagsmall class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as fine print.HTMLOpenTag/smallHTMLCloseTag
                                HTMLOpenTagstrong class="mt-1 block"HTMLCloseTagThis line rendered as bold text.HTMLOpenTag/strongHTMLCloseTag
                                HTMLOpenTagem class="mt-1 block"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="mr-1 rounded-full bg-primary px-1 text-xs text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-success px-1 text-xs text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-1 text-xs text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-1 text-xs text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-6 font-medium"HTMLCloseTagBadge SizesHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-primary px-2 py-1 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border px-2 py-1 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-success px-2 py-1 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-2 py-1 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-2 py-1 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full bg-slate-100 px-2 py-1 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-4"HTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-primary px-3 py-2 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-success px-3 py-2 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-3 py-2 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-3 py-2 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full bg-slate-100 px-3 py-2 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-6"HTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-primary px-4 py-3 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border px-4 py-3 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-success px-4 py-3 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-4 py-3 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-4 py-3 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full bg-slate-100 px-4 py-3 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-10 font-medium"HTMLCloseTagSquare BadgeHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 bg-primary px-1 text-xs text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 bg-success px-1 text-xs text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 bg-warning px-1 text-xs text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan class="mr-1 bg-danger px-1 text-xs text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-6 font-medium"HTMLCloseTagOutline BadgeHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-4"HTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border border-primary px-3 py-2 text-primary dark:border-primary"
                                    HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border border-success px-3 py-2 text-success dark:border-success"
                                    HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border border-warning px-3 py-2 text-warning dark:border-warning"
                                    HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                    HTMLOpenTagspan
                                        class="mr-1 rounded-full border border-danger px-3 py-2 text-danger dark:border-danger"
                                    HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Separator

Show example code

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

## Divider

Show example code
or

                    HTMLOpenTagdiv
                                    class="mt-2 flex w-full justify-center border-t border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                    HTMLOpenTagdiv class="-mt-3 bg-white px-5 text-slate-500 dark:bg-darkmode-600"HTMLCloseTag
                                        or
                                    HTMLOpenTag/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
                                        class="block font-normal text-primary"
                                        href=""
                                    HTMLCloseTagExample textHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block font-medium text-primary"
                                        href=""
                                    HTMLCloseTagExample medium textHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block font-semibold text-primary"
                                        href=""
                                    HTMLCloseTagExample semibold textHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block font-bold text-primary"
                                        href=""
                                    HTMLCloseTagExample bolder textHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block font-extrabold text-primary"
                                        href=""
                                    HTMLCloseTagExample boldest textHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-5"HTMLCloseTag
                                    HTMLOpenTaga
                                        class="block text-primary"
                                        href=""
                                    HTMLCloseTagPrimary stateHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block text-slate-600 dark:text-slate-500"
                                        href=""
                                    HTMLCloseTagSecondary stateHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block text-success"
                                        href=""
                                    HTMLCloseTagSuccess stateHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block text-warning"
                                        href=""
                                    HTMLCloseTagWarning stateHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTaga
                                        class="block text-danger"
                                        href=""
                                    HTMLCloseTagDanger stateHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag