Heading
Heading

Headings are an essential part of structuring and organizing content in your application. They provide hierarchy and help users navigate and understand the information presented. This section covers how to use headings effectively in your project.

Example code / preview

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
            
        

Headings play a crucial role in structuring and organizing your content. By using headings effectively and consistently, you can improve the accessibility and readability of your application. Remember to choose the appropriate heading level, keep headings semantic, and follow accessibility best practices for a better user experience.

Text Settings

Text settings and styles are essential for ensuring that your content is both visually appealing and easy to read. This section covers how to apply various text settings to your content.

Example code / preview
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
            
        

Customizing text settings is crucial for creating visually appealing and readable content. By adjusting font size, line height, color, font family, text alignment, and text decoration, you can tailor your text to suit your application's design and improve the user experience. Remember to maintain consistency in your text settings throughout your application for a polished look.

Common Elements

Common HTML elements are often used to style or convey special meanings within your content. This section covers some common HTML elements that can be used to enhance the presentation of your text-based content.

Example code / preview
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
            
        

These common HTML elements provide you with a range of tools to enhance the styling and meaning of your text-based content. By using these elements appropriately, you can improve the readability and visual presentation of your content while conveying specific meanings or emphasis where needed.

Badges

Badges are small, informative components used to visually represent status, notifications, or other metadata in a concise manner. This section covers how to use badges effectively in your web applications.

Example code / preview
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
            
        

Badges are versatile components that can help you convey important information or highlight specific elements in your application. By using different variants, icons, counts, and custom styling, you can create badges that fit seamlessly into your design and improve user experience.

Separator

Separators are used to create visual divisions or spacing between elements in a user interface. They help improve the overall layout and readability of a page. This section covers various ways to use separators effectively in your web applications.

Example code / preview
            
                HTMLOpenTagdiv
                                                    class="w-full border-t border-dashed border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
                                                    class="mt-5 w-full border-t border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

Separators play a crucial role in improving the layout and readability of your web pages. They can help create a clear visual hierarchy and enhance the overall user experience. By using different types of separators and custom styles, you can tailor them to match your application's design and effectively structure your content.

Divider

Dividers are used to create clear visual separations between sections or content on a webpage. They help improve the overall structure and organization of a page. This section covers various ways to use dividers effectively in your web applications.

Example code / preview
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
            
        

Dividers are essential for maintaining a well-structured layout in your web applications. They help create a clear visual hierarchy and enhance the overall user experience by providing a sense of organization and separation between content sections.

Links

Links are a fundamental part of web development and navigation. They allow users to navigate between different pages or resources on the internet. This section covers the usage of links in web development and provides examples of how to create and style links effectively.

Example code / preview
            
                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
            
        

Links are a crucial part of web development, allowing users to navigate between different pages and resources. Understanding how to create and style links effectively is essential for providing a smooth and user-friendly browsing experience. By using proper HTML syntax and CSS styling, you can make your links visually appealing and functional, enhancing the overall user experience on your website or web application.