Candidate Details
Font Family
A
Font Family
"Inter", sans-serif
Aa
Font Weight
400
Aa
Font Weight
500
Aa
Font Weight
600
Typography Heading
Headings
All HTML headings, <h1> through <h6>, are available.
h1. Tailwind heading
h2. Tailwind heading
h3. Tailwind heading
h4. Tailwind heading
h5. Tailwind heading
h6. Tailwind heading
Display Heading
Display headings
Traditional heading elements are designed to work best in the meat of your page content.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Button
Basic Buttons
TailwindCSS includes six predefined button styles, each serving its own semantic purpose..
Soft Buttons
Use .bg-color-* class for a badge lighten.
Border Buttons
Replace the default modifier classes with the .border-color-* ones to remove all background images and colors on any button.
Rounded Buttons
Use the .rounded-full modifier class to make badges more rounded.
Badges
Basic
Add any of the below mentioned modifier classes to change the appearance of a badge.
Soft Badges
Use .bg-color-* class for a pill badge.
Soft Badges
Use .bg-color-* class for a pill badge.
Dropdowns
Any single .btn can be turned into a dropdown
toggle with some markup changes. Here’s how you can put them to work
with either <button>
elements:
Alerts
Basic
Alerts are available for any length of text, as well as an optional close button.
Dismissing Alerts
Alerts are available for any length of text, as well as an optional close button.
Images
Image Sizes
Use classes .h-* .w-*.
Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkCard title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkTabs
Basic Tabs
Example of Default Nav Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
You probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Basic Nav Pills
Example of Default Nav Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
You probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Modals
Basic
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Pagination
Progress
Basic
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
Striped & Animated
Add Animation stripe via CSS gradient over the progress bar’s background color.
Tooltips
Tooltips
Hover over the links below to see tooltips.
Spinners
Border
Add .animate-spin color for a Spinner color variation.
Border
Switch to the grow spinner.it does repeatedly grow Continue!
Video
Responsive Embed Video 16:9
Aspect ratios can be customized with modifier classes.
