Tailwind CSS Headings
The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts
Get started with the heading component to define titles and subtitles on a web page and also improve the on-page SEO metrics of your website by targeting high-traffic keywords on Google.
At least one unique H1 tag should be available for each page on your website with the next tags starting from H2 to H6 for each section. Choose from a collection of custom heading components based on multiple styles and layouts built with the utility classes from Tailwind CSS.
Default heading #
Use this example of a H1 heading in the context of a paragraph and CTA button for landing pages.
- HTML
We invest in the world’s potential
Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
Learn more<h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">We invest in the world’s potential</h1>
<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<a href="#" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
Learn more
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>Second-level heading #
Use this example of a second-level H2 heading as the main subtitle for each section of your web page.
- HTML
Payments tool for companies
Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease.
Read more<h2 class="text-4xl font-extrabold dark:text-white">Payments tool for companies</h2>
<p class="my-4 text-lg text-gray-500">Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.</p>
<p class="mb-4 text-lg font-normal text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease.</p>
<a href="#" class="inline-flex items-center text-lg text-blue-600 dark:text-blue-500 hover:underline">
Read more
<svg class="ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>Highlighted heading #
Use this example to highlight a certain portion of the heading text with a different color.
- HTML
Get back to growth with the world's #1 CRM.
Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
<h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Get back to growth with <span class="text-blue-600 dark:text-blue-500">the world's #1</span> CRM.</h1>
<p class="text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>Heading mark #
This example can be used to mark one part of the heading text with a solid background for highlighting.
- HTML
Regain control over your days
Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
<h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Regain <mark class="px-2 text-white bg-blue-600 rounded dark:bg-blue-500">control</mark> over your days</h1>
<p class="text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>Heading gradient #
Use this example to highlight a portion of the heading text by using a gradient style.
- HTML
Better Data Scalable AI.
Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
<h1 class="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl"><span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">Better Data</span> Scalable AI.</h1>
<p class="text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>Heading underline #
Get started with this example to underline an important part of the heading component using the offset feature from Tailwind CSS.
- HTML
We invest in the world’s potential
Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
<h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">We invest in the <span class="underline underline-offset-3 decoration-8 decoration-blue-400 dark:decoration-blue-600">world’s potential</span></h1>
<p class="text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">Here at Tailwind we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>Breadcrumb context #
Get started with this example to position a breadcrumb component above the H1 heading component.
- HTML
Team management
<nav class="flex mb-4" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white">Settings</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Team</span>
</div>
</li>
</ol>
</nav>
<h2 class="mb-4 text-3xl font-extrabold tracking-tight leading-none text-gray-900 md:text-4xl dark:text-white">Team management</h2>Badge context #
Use this example to show a badge component inside the heading text element as a secondary indicator.
- HTML
TailwindPRO
<h1 class="flex items-center text-5xl font-extrabold dark:text-white">Tailwind<span class="bg-blue-100 text-blue-800 text-2xl font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-2">PRO</span></h1>Secondary text #
This example can be used to add a secondary text inside the main heading component.
- HTML
TailwindThis is secondary text
<h1 class="text-5xl font-extrabold dark:text-white">Tailwind<small class="ml-2 font-semibold text-gray-500 dark:text-gray-400">This is secondary text</small></h1>Sizes #
The heading component has six levels of importance starting from H1 which has to be unique on the page and has the greatest weight of importance all the way to H6.
Heading one (H1) #
Use the H1 tag as the most important text element to indicate the title of your web page.
- HTML
Heading 1
<h1 class="text-5xl font-extrabold dark:text-white">Heading 1</h1>Heading two (H2) #
The H2 tag can be used as subtitles of the page’s sections.
- HTML
Heading 2
<h2 class="text-4xl font-bold dark:text-white">Heading 2</h2>Heading three (H3) #
Use the H3 tags inside sections that already have a H2 available.
- HTML
Heading 3
<h3 class="text-3xl font-bold dark:text-white">Heading 3</h3>Heading four (H4) #
The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
- HTML
Heading 4
<h4 class="text-2xl font-bold dark:text-white">Heading 4</h4>Heading five (H5) #
The H5 tag is most often used in longer articles with other heading already available or in sidebars.
- HTML
Heading 5
<h5 class="text-xl font-bold dark:text-white">Heading 5</h5>Heading six (H6) #
Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
- HTML
Heading 6
<h6 class="text-lg font-bold dark:text-white">Heading 6</h6>