Highly customizable components for building modern websites and applications that look and feel the way you want.
Title 2 for Headings
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Modern
Customizable
Responsive
Accessible
Title 3 for Headings
Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.
Méschac Irung
Créator of Tailus UI
Title 4 for Headings
Title 5 for Headings
Title 6 for Headings
CodeKbd
<div class="space-y-6">
<h1 class="text-4xl text-display font-bold lg:text-5xl">Build Custom Web UIs</h1>
<h1 class="text-3xl font-semibold text-title">Title for Headings</h1>
<p class="text-body">
Highly <a href="https://tailus.io" class="link variant-underlined intent-primary" target="_blank" rel="noopener noreferrer">customizable components</a> for building <strong class="text-title">modern</strong> websites and <em class="text-title">applications</em> that look and feel the way you want.
</p>
<h2 class="text-2xl font-semibold text-title">Title 2 for Headings</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<ul class="list-inside list-disc space-y-2">
<li>Modern</li>
<li>Customizable</li>
<li>Responsive</li>
<li>Accessible</li>
</ul>
<h3 class="text-xl font-semibold text-title">Title 3 for Headings</h3>
<blockquote class="text-blockquote">Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.</blockquote>
<div class="grid gap-3 items-center [grid-template-columns:auto_1fr]">
<div class="avatar sz-lg">
<img src={MESCHAC_AVATAR} alt="Méschac Irung" />
</div>
<div>
<p class="text-title">Méschac Irung</p>
<span class="block text-caption text-sm">Créator of Tailus UI</span>
</div>
</div>
<h4 class="text-lg font-medium text-title">Title 4 for Headings</h4>
<h5 class="text-base font-medium text-title">Title 5 for Headings</h5>
<h6 class="text-base font-medium text-title">Title 6 for Headings</h6>
<div className="flex items-end gap-3">
<code className="code intent-primary">Code</code>
<kbd className="kbd">Kbd</kbd>
</div>
</div>
Display
A title designed for prominent display at large sizes, specifically for use in the hero section of a webpage.
The body text elaborates on the structure outlined by titles, providing depth and explanation.
Tailus Themer is a Tailwind CSS Styling Library for Building Modern, Consistent and Accessible Web UIs.
<p class="text-body">
Tailus Themer is a Tailwind CSS <strong class="text-title">Styling Library</strong> for Building Modern, Consistent and Accessible <em class="text-title">Web UIs</em>.
</p>
Blockquote
The body text elaborates on the structure outlined by titles, providing depth and explanation.
Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.
<blockquote class="text-blockquote">Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.</blockquote>
List
Bullet points and numbered lists organize content in a hierarchical fashion, highlighting key elements efficiently.
