Create website or app projects easier with our amazing typography component!
Our typography component includes elements like headings, paragraphs, text, and colors that you want to display on a webpage. They communicate the organization of the content and guide the users on the page.
Check out below our examples of typography elements styled with Tailwind CSS.
Use this simple paragraph example for any type of web page.
The time is now for it to be okay to be great. For being a bright color. For standing out. Get ready to experience a new level of performance and functionality.
<p class="font-normal leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>Organize and structure text to improve readability and accessibility with Material Tailwind's headings.
<h1
class="font-bold leading-snug tracking-tight text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-5xl"
>
H1 Get ready to experience a new level of performance and functionality.
</h1>
<h1
class="font-light leading-snug tracking-tight text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-5xl"
>
H1 Get ready to experience a new level of performance and functionality.
</h1>
<h2
class="font-bold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-4xl"
>
H2 Get ready to experience a new level of performance and functionality.
</h2>
<h2
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-4xl"
>
H2 Get ready to experience a new level of performance and functionality.
</h2>
<h3
class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-xl max-w-lg lg:max-w-2xl lg:text-3xl"
>
H3 Get ready to experience a new level of performance and functionality.
</h3>
<h3
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-xl max-w-lg lg:max-w-2xl lg:text-3xl"
>
H3 Get ready to experience a new level of performance and functionality.
</h3>
<h4
class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-lg max-w-md lg:max-w-xl lg:text-2xl"
>
H4 Get ready to experience a new level of performance and functionality.
</h4>
<h4
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-lg max-w-md lg:max-w-xl lg:text-2xl"
>
H4 Get ready to experience a new level of performance and functionality.
</h4>
<h5
class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-base max-w-sm lg:max-w-lg lg:text-xl"
>
H5 Get ready to experience a new level of performance and functionality.
</h5>
<h5
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-base max-w-sm lg:max-w-lg lg:text-xl"
>
H5 Get ready to experience a new level of performance and functionality.
</h5>
<h6
class="font-bold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-sm max-w-xs lg:max-w-md lg:text-lg"
>
H6 Get ready to experience a new level of performance and functionality.
</h6>
<h6
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-sm max-w-xs lg:max-w-md lg:text-lg"
>
H6 Get ready to experience a new level of performance and functionality.
</h6>Highlight the key message or value proposition of a page or section with our lead text example.
The time is now for it to be okay to be great. For being a bright color. For standing out. Get ready to experience a new level of performance and functionality.
<p class="font-normal leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>See below how you can implement a paragraph with Material Tailwind.
The time is now for it to be okay to be great. For being a bright color. For standing out. Get ready to experience a new level of performance and functionality.
<p className="font-light leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>Use this example of small text for disclaimers, footnotes, labels, and as secondary information.
The time is now for it to be okay to be great. For being a bright color. For standing out. Get ready to experience a new level of performance and functionality.
<p className="font-light leading-relaxed mx-auto text-slate-500 text-sm max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>Implement different colors for your typography depending on the message you want to transmit.
<h1 class="font-bold leading-snug tracking-tight text-slate-800 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-blue-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-red-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-green-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>You can implement gradient colors for your typography. See below how you can do this with Material Tailwind.
<h1 class="font-bold leading-snug tracking-tight bg-gradient-to-tr from-slate-800 to-slate-500 bg-clip-text text-transparent mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>Check out more typography examples from Material Tailwind Blocks:
• Hero Blocks
• Feature Blocks
• Content Blocks
• Blog Templates