Text
Paragraph
Below you can find a Paragraph component styled with tailwindcss.
- Preview
- HTML
- React
Large sized paragraph with regular font weight
Copy
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-normal">
Large sized paragraph with regular font weight
</p>
Copy
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-normal">
Large sized paragraph with regular font weight
</p>- Preview
- HTML
- React
Large sized paragraph with bold font weight
Copy
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-bold">
Large sized paragraph with bold font weight
</p>
Copy
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-base leading-175 font-bold">
Large sized paragraph with bold font weight
</p>- Preview
- HTML
- React
Medium sized paragraph with regular font weight
Copy
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-normal">
Medium sized paragraph with regular font weight
</p>
Copy
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-normal">
Medium sized paragraph with regular font weight
</p>- Preview
- HTML
- React
Medium paragraph with bold font weight
Copy
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-bold">Medium paragraph with bold font weight</p>
Copy
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-sm leading-175 font-bold">Medium paragraph with bold font weight</p>- Preview
- HTML
- React
Small paragraph
Copy
<p class="dark:text-white font-sans tracking-normal text-neutral-400 text-xs font-normal leading-150 font-normal">Small paragraph</p>
Copy
<p className="dark:text-white font-sans tracking-normal text-neutral-400 text-xs font-normal leading-150 font-normal">Small paragraph</p>Hero
Below you can find a Hero component styled with tailwindcss.
- Preview
- HTML
- React
Hero
Copy
<h1 class="dark:text-white font-sans text-xxxl text-neutral-600 leading-125 font-bold tracking-normal">Hero</h1>
Copy
<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
- HTML
- React
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.
Copy
<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>
Copy
<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
- HTML
- React
H1 Header
Copy
<h1 class="font-sans font-normal text-xxl leading-125 tracking-none">H1 Header</h1>
Copy
<h1 className="font-sans font-normal text-xxl leading-125 tracking-none">H1 Header</h1>- Preview
- HTML
- React
H2 Header
Copy
<h2 class="font-sans font-bold text-xl leading-125 tracking-normal">H2 Header</h2>
Copy
<h2 className="font-sans font-bold text-xl leading-125 tracking-normal">H2 Header</h2>- Preview
- HTML
- React
H3 Header
Copy
<h3 class="font-sans font-bold text-lg leading-125 tracking-normal">H3 Header</h3>
Copy
<h3 className="font-sans font-bold text-lg leading-125 tracking-normal">H3 Header</h3>- Preview
- HTML
- React
H4 Header
Copy
<h4 class="font-sans font-bold text-md leading-125 tracking-normal">H4 Header</h4>
Copy
<h4 className="font-sans font-bold text-md leading-125 tracking-normal">H4 Header</h4>- Preview
- HTML
- React
H5 Header
Copy
<h5 class="font-sans font-bold text-sm leading-150 tracking-normal">H5 Header</h5>
Copy
<h5 className="font-sans font-bold text-sm leading-150 tracking-normal">H5 Header</h5>- Preview
- HTML
- React
H6 Header
Copy
<h6 class="font-sans font-bold text-xs leading-tight tracking-normal">H6 Header</h6>
Copy
<h6 className="font-sans font-bold text-xs leading-tight tracking-normal">H6 Header</h6>