Skip to Content

Typography

Paragraph

Below you can find a Paragraph component styled with tailwindcss.

Preview - Large sized paragraph with regular font weight

Paragraph with size="large" and weight="regular"

HTML
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-normal">Paragraph with size=&quot;large&quot; and weight=&quot;regular&quot;</p>
React
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-normal">Paragraph with size=&quot;large&quot; and weight=&quot;regular&quot;</p>

Preview - Large sized paragraph with bold font weight

Paragraph with size="large" and weight="bold"

HTML
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-bold">Paragraph with size=&quot;large&quot; and weight=&quot;bold&quot;</p>
React
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-bold">Paragraph with size=&quot;large&quot; and weight=&quot;bold&quot;</p>

Preview - Medium sized paragraph with regular font weight

Paragraph with size="medium" and weight="regular"

HTML
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-normal">Paragraph with size=&quot;medium&quot; and weight=&quot;regular&quot;</p>
React
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-normal">Paragraph with size=&quot;medium&quot; and weight=&quot;regular&quot;</p>

Preview - Medium paragraph with bold font weight

Paragraph with size="medium" and weight="bold"

HTML
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-bold">Paragraph with size=&quot;medium&quot; and weight=&quot;bold&quot;</p>
React
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-bold">Paragraph with size=&quot;medium&quot; and weight=&quot;bold&quot;</p>

Preview - Small paragraph

Paragraph with size="small"

HTML
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-xs font-normal leading-150 font-normal">Paragraph with size=&quot;small&quot;</p>
React
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-xs font-normal leading-150 font-normal">Paragraph with size=&quot;small&quot;</p>

Hero

Below you can find a Hero component styled with tailwindcss.

Preview - Hero

Hero

HTML
<h1 class="dark:text-white font-sans text-xxxl text-neutral-600 leading-125 font-bold tracking-normal">Hero</h1>
React
<h1 className="dark:text-white font-sans text-xxxl text-neutral-600 leading-125 font-bold tracking-normal">Hero</h1>

Kicker

Below you can find a Kicker component styled with tailwindcss.

Preview - Kicker

lorem ipsum dolor sit amet consectetur adipisicing elit. porro autem numquam officiis quaerat, magnam, impedit ullam sed nulla commodi repellendus recusandae ipsa modi velit consequuntur asperiores quo exercitationem veniam cumque.
HTML
<div class="text-xs text-neutral-400 font-black tracking-wide leading-125 uppercase">
	lorem ipsum dolor sit amet consectetur adipisicing elit. porro autem numquam officiis quaerat, magnam, impedit ullam sed nulla commodi repellendus recusandae ipsa modi velit consequuntur asperiores quo exercitationem veniam cumque.
</div>
React
<div className="text-xs text-neutral-400 font-black tracking-wide leading-125 uppercase">
	lorem ipsum dolor sit amet consectetur adipisicing elit. porro autem numquam officiis quaerat, magnam, impedit ullam sed nulla commodi repellendus recusandae ipsa modi velit consequuntur asperiores quo exercitationem veniam cumque.
</div>

Headers

Below you can find headers components styled with tailwindcss.

Preview - H1

HTML
<h1 class="font-sans font-normal text-xxl leading-125 tracking-none"></h1>
React
<h1 className="font-sans font-normal text-xxl leading-125 tracking-none"></h1>

Header 1

Preview - H2

HTML
<h2 class="font-sans font-bold text-xl leading-125 tracking-normal"></h2>
React
<h2 className="font-sans font-bold text-xl leading-125 tracking-normal"></h2>

Header 2

Preview - H3

HTML
<h3 class="font-sans font-bold text-lg leading-125 tracking-normal"></h3>
React
<h3 className="font-sans font-bold text-lg leading-125 tracking-normal"></h3>

Header 3

Preview - H4

HTML
<h4 class="font-sans font-bold text-md leading-125 tracking-normal"></h4>
React
<h4 className="font-sans font-bold text-md leading-125 tracking-normal"></h4>
Header 4

Preview - H5

HTML
<h5 class="font-sans font-bold text-sm leading-150 tracking-normal"></h5>
React
<h5 className="font-sans font-bold text-sm leading-150 tracking-normal"></h5>
Header 5

Preview - H6

HTML
<h6 class="font-sans font-bold text-xs leading-tight tracking-normal"></h6>
React
<h6 className="font-sans font-bold text-xs leading-tight tracking-normal"></h6>
Header 6