Tailwind CSS React Typography - Horizon UI

Customise your web projects with our amazing Tailwind CSS React headings!

The headings are titles or subtitles that you want to display on a webpage. They communicate the organization of the content and guide the users on the page.

Below we are presenting 6 levels of headings that you can use in your Tailwind CSS React project. The examples come in different colors so you can adapt them easily to your needs.

Headings

Horizon UI

<div class="flex flex-col gap-8 text-left">
  <h1 class="text-navy-800 block font-sans text-5xl font-semibold leading-tight tracking-normal text-inherit antialiased dark:text-white">
    Horizon UI
  </h1>
  <h2 class="text-navy-800 block font-sans text-4xl font-semibold leading-[1.3] tracking-normal text-inherit antialiased dark:text-white">
    Horizon UI
  </h2>
  <h3 class="text-navy-800 block font-sans text-3xl font-semibold leading-snug tracking-normal text-inherit antialiased dark:text-white">
    Horizon UI
  </h3>
  <h4 class="text-navy-800 block font-sans text-2xl font-semibold leading-snug tracking-normal text-inherit antialiased dark:text-white">
    Horizon UI
  </h4>
  <h5 class="text-navy-800 block font-sans text-xl font-semibold leading-snug tracking-normal text-inherit antialiased dark:text-white">
    Horizon UI
  </h5>
  <h6 class="text-navy-800 block font-sans text-base font-semibold capitalize leading-relaxed tracking-normal text-inherit antialiased dark:text-white">
    Horizon UI
  </h6>
</div>

Lead Text

Horizon UI is an easy to use components library for Tailwind CSS and React. It provides a simple way to customize your components, you can change the colors, fonts, breakpoints and everything you need.

<p class="text-navy-800 block font-sans text-xl font-normal leading-relaxed text-inherit antialiased dark:text-white">
  Horizon UI is an easy to use components library for Tailwind CSS and
  React. It provides a simple way to customize your components, you
  can change the colors, fonts, breakpoints and everything you need.
</p>

Paragraph

<p class="text-navy-800 block font-sans text-base font-normal leading-relaxed text-inherit antialiased dark:text-white">
  Horizon UI is an easy to use components library for Tailwind CSS and
  React. It provides a simple way to customize your components, you
  can change the colors, fonts, breakpoints and everything you need.
</p>

Small Text

<p class="text-navy-800 block font-sans text-sm font-normal leading-normal text-inherit antialiased dark:text-white">
  Horizon UI is an easy to use components library for Tailwind CSS and
  React. It provides a simple way to customize your components, you
  can change the colors, fonts, breakpoints and everything you need.
</p>

Typography Colors

Horizon UI

<div class="flex flex-col gap-8 text-left">
  <h1 class="text-navy-900 block font-sans text-5xl font-semibold leading-tight tracking-normal antialiased dark:text-white">
    Horizon UI
  </h1>
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-blue-500 antialiased dark:text-white">
    Horizon UI
  </h1>
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-red-500 antialiased dark:text-white">
    Horizon UI
  </h1>
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-green-500 antialiased dark:text-white">
    Horizon UI
  </h1>
</div>

Typography Gradient Color

Horizon UI

<h1 class="bg-gradient-to-tr text-navy-800 block from-pink-600 to-pink-400 bg-clip-text font-sans text-5xl font-semibold leading-tight tracking-normal text-transparent antialiased dark:text-white">
  Horizon UI
</h1>

tooltip

calendar