Text
Heading 1
<h1 class="text-6xl font-bold text-black">Heading 1</h1>
Heading 2
<h2 class="text-4xl font-bold text-black">Heading 2</h2>
Heading 3
<h3 class="text-2xl font-bold text-black">Heading 3</h3>
Heading 4
<h4 class="text-lg text-black font-bold">Heading 4</h4>
Cards
Default Card:
Tailwind
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo tempora maxime quidem excepturi.
<div class="flex flex-col bg-white border rounded-lg shadow-md">
<div>
<img class="block h-auto w-100% rounded-lg" src="" alt="" />
</div>
<div class="p-5">
<h4 class="text-lg text-black font-bold">Tailwind</h4>
<p class="text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo tempora maxime
quidem excepturi.
</p>
</div>
<div class="px-5 pb-5">
<button class="border font-bold bg-white hover:bg-gray-200 text-black rounded py-2 px-3 cursor-pointer">Learn More</button>
</div>
</div>
Card Design 2:
Tailwind
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo tempora maxime quidem excepturi.
<div class="flex flex-col bg-white border rounded-lg shadow-md mt-8">
<div class="mx-4 -mt-8 rounded-lg overflow-hidden shadow-md">
<img class="block h-auto w-full" src="" alt="" />
</div>
<div class="p-5">
<h4 class="text-lg text-black font-bold">Tailwind</h4>
<p class="text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo tempora maxime
quidem excepturi.
</p>
</div>
<div class="px-5 pb-5">
<button
class="border font-bold bg-white hover:bg-gray-200 text-black rounded py-2 px-3 cursor-pointer"> Learn More</button>
</div>
</div>
Card Left Perspective (Requires Custom Utility Class):
Tailwind
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo tempora maxime quidem excepturi.
<div class="flex flex-col bg-white border rounded-lg overflow-hidden shadow-md transform-perspective-left">
<div>
<img class="block h-auto w-100% rounded-lg" src="" alt="" />
</div>
<div class="p-5">
<h4 class="text-lg text-black font-bold">Tailwind</h4>
<p class="text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo tempora maxime
quidem excepturi.
</p>
</div>
<div class="px-5 pb-5">
<button class="border font-bold bg-white hover:bg-gray-200 text-black rounded py-2 px-3 cursor-pointer">Learn More </button>
</div>
</div>
.transform-perspective-left {
transform: scale(1) perspective(500px) rotateX(0deg) rotateY(-15deg) rotateZ(0deg) translateY(0px);
}
Card Horizontal:
Tail Components
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit ducimus impedit incidunt quibusdam. Eum non itaque et pariatur quis.
<div class="flex relative bg-white border shadow-md rounded-lg overflow-hidden">
<div class="flex">
<img
class="w-full h-auto"
src=""
alt=""
/>
</div>
<div class="flex flex-col flex-auto justify-center p-10">
<h4 class="text-lg font-bold text-black">Tail Components</h4>
<p classs="text-black">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit ducimus impedit
incidunt quibusdam. Eum non itaque et pariatur quis.
</p>
</div>
</div>
Inputs
Input
<input type="text" aria-label="" class="flex items-center border p-3 rounded bg-white shadow" placeholder="Enter Text"/>
Input Text Label:
Input button
<div class="flex items-stretch flex-no-wrap w-full relative border bg-white rounded shadow">
<input type="text" aria-label="" class="w-full pl-3 py-3" placeholder="Enter Text" />
<button class="bg-gray-200 hover:bg-gray-200 p-2 rounded">Submit</button>
</div>
Textarea
<textarea class="flex items-center border p-3 rounded bg-white shadow" placeholder="" name="" id="" cols="30" rows="5"></textarea>
Selector
Single Selector:
<div class="inline-block relative">
<select class="block appearance-none w-full bg-white border py-3 px-3 pr-8 rounded cursor-pointer hover:bg-gray-100 focus:bg-gray-100 focus:border-gray-50 overflow-hidden" aria-label="select a css framework">
<option value="">Select an option</option>
<option value="Tailwind">Tailwind</option>
<option value="Tailwind">Tailwind</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 pr-3 flex items-center text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="5.3" overflow="scroll"><path d="M1 1l4.3 3.2c.1.1.3.1.5 0L10 1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"/> </svg>
</div>
</div>
12 Grid System
4 Column Gird
<div class="flex border">
<div class="w-3/12 bg-gray-400"></div>
<div class="w-3/12 bg-gray-800"></div>
<div class="w-3/12 bg-gray-400"></div>
<div class="w-3/12 bg-gray-800"></div>
</div>
3 Column Gird
<div class="flex border">
<div class="w-4/12 bg-gray-400"></div>
<div class="w-4/12 bg-gray-800"></div>
<div class="w-4/12 bg-gray-400"></div>
</div>
2 Column Grid
<div class="flex border">
<div class="w-6/12 bg-gray-400"></div>
<div class="w-6/12 bg-gray-800"></div>
</div>
Full Width Grid
<div class="flex border">
<div class="w-full bg-gray-400"></div>
</div>
Badges/Pills
Badge
<span class="flex items-center justify-center bg-white font-bold text-black hv w-24 p-1 rounded">Badge</span>
Link
<a href="#"class="flex items-center justify-center bg-indigo-500 font-bold text-white w-24 p-1 cursor-pointer rounded">Link</a>
Pill
<span class="flex items-center justify-center bg-indigo-500 font-bold text-white rounded-full w-24 p-1">Pill</span>
Link
<a href="#"class="flex items-center justify-center bg-indigo-500 font-bold text-white rounded-full w-24 p-1 cursor-pointer">Link</a>
Hero Sections
Centered Hero:
Tailwind Components
Components made for your next Tailwind project. Get a quick baseline to work from and apply your own styling them to.
<div class="flex w-full bg-accent">
<div class="w-full flex flex-col justify-center items-center py-32">
<h1 class="text-black text-5xl mb-3 text-center sm:text-6xl">
Tailwind Components
</h1>
<p class="inline-block text-lg text-gray-900 max-w-md text-center">
Components made for your next Tailwind project. Get a quick baseline to work from
and apply your own styling them to.
</p>
</div>
</div>
Illustration Hero:
Tailwind UI Components
Components made for your next Tailwind project. Get a quick baseline to work from and apply your own styling them to.
<div class="w-full bg-accent">
<div class="container max-w-5xl mx-auto">
<div class="flex flex-wrap items-center py-10 md:py-32">
<div class="w-full md:w-1/2">
<div class="w-full flex flex-col">
<div class="flex flex-col p-5 text-center items-center md:text-left md:items-start"><h1 class="text-black text-5xl mb-3 leading-tight sm:text-6xl">Tailwind UI Components</h1><p class="inline text-lg text-gray-800 leading-relaxed max-w-sm">Components made for your next Tailwind project. Get a quick baseline to workfrom and apply your own styling them to.</p></div>
</div>
</div>
<div class="w-full md:w-1/2"><div class="w-full flex flex-col justify-center items-center h-full px-5"><imgclass="max-w-xl"src=""alt=""/></div></div>
</div>
</div>
</div>
Table
Table Vertical:
| # | Framework | Utility Based CSS | Size |
|---|---|---|---|
| 1 | Tailwind | Yes | 477.6kb |
| 2 | Bootstrap | No | 187.8kb |
| 3 | Bulma | No | 205.6kb |
<table class="table-auto w-full border">
<thead class="bg-gray-200">
<tr><th class="p-3">#</th><th class="p-3 text-left">Framework</th><th class="p-3 text-left">Utility Based CSS</th><th class="p-3 text-left">Size</th></tr>
</thead>
<tbody>
<tr class="border-t"><th class="p-4">1</th><td class="p-4">Tailwind</td><td class="p-4">Yes</td><td class="p-4">477.6kb</td></tr>
<tr class="border-t"><th class="p-4">2</th><td class="p-4">Bootstrap</td><td class="p-4">No</td><td class="p-4">187.8kb</td></tr>
<tr class="border-t"><th class="p-4">3</th><td class="p-4">Bulma</td><td class="p-4">No</td><td class="p-4">205.6kb</td></tr>
</tbody>
</table>
Lists
Unordered List:
- Tailwind
- Bootstrap
- Bulma
- Foundation
- Material
<ul class="list-inside">
<li class="py-3"></li>
<li class="py-3"></li>
<li class="py-3"></li>
<li class="py-3"></li>
<li class="py-3"></li>
</ul>
Ordered List:
- Tailwind
- Bootstrap
- Bulma
- Foundation
- Material
<ol class="list-inside list-decimal">
<li class="py-3"></li>
<li class="py-3"></li>
<li class="py-3"></li>
<li class="py-3"></li>
<li class="py-3"></li>
</ol>
Tab (Requires javscript to toggle the tabs)
Horizontal Tabs:
Tail Components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque tempora tempore officia neque fuga, quia molestias fugiat quos. Ut, tempora! Repellendus, veniam pariatur. Modi ullam culpa labore consequuntur officiis vel.
<div class="relative">
<ul class="flex flex-row">
<li class="py-3 px-6 mr-1 bg-white border rounded-lg cursor-pointer hover:bg-gray-200"><a href="#tab1">Tab 1</a></li>
<li class="py-3 px-6 mr-1 bg-white border rounded-lg cursor-pointer hover:bg-gray-200"><a href="#tab2">Tab 2</a></li>
<li class="py-3 px-6 bg-white border rounded-lg cursor-pointer hover:bg-gray-200"><a href="#tab3">Tab 3</a></li>
</ul>
<div class="flex flex-wrap p-6 mt-1 bg-white border shadow-md rounded-lg">
<div class="inline-block" id="tab-1"><h4 class="text-lg font-bold text-black"></h4><p></p></div>
<div class="hidden" id="tab-2"></div>
<div class="hidden" id="tab-3"></div>
</div>
</div>
Accordion
Details element is only supported in modern browsers!
Polyfill For IETailwind
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
<details class="bg-white border shadow-lg rounded">
<summary class="p-3 border-b cursor-pointer hover:text-gray-600">Tailwind</summary>
<p class="py-5 pl-5">Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.</p>
</details>
Responsive Navbar (CSS ONLY)
Navigation bar Static:
<div class="flex items-center flex-wrap justify-around max-w-5xl py-5 mx-auto md:justify-between">
<img class="max-w-full h-auto" src="" alt=""/>
<nav class="main-nav">
<ul class="mt-4 sm:mt-0 text-center">
<li class="inline"><a class="inline-block p-1 p-2 font-bold hover:text-gray-600" href="#">Nav 1</a></li>
<li class="inline"><a class="inline-block p-1 p-2 font-bold hover:text-gray-600" href="#">Nav 2</a></li>
<li class="inline"><a class="inline-block p-1 p-2 font-bold hover:text-gray-600" href="#">Nav 3</a></li>
<li class="inline"><a class="inline-block py-1 px-2 font-bold hover:text-gray-600" href="#">Nav 4</a></li>
</ul>
</nav>
</div>
Navigation Bar Fixed:
<div class="fixed bg-white shadow-lg w-full z-10">
<div class="flex items-center flex-wrap justify-around max-w-5xl py-5 mx-auto md:justify-between">
<img class="max-w-full h-auto" src="" alt="" />
<nav class="main-nav">
<ul class="mt-4 sm:mt-0 text-center">
<li class="inline"><a class="inline-block p-1 p-2 font-bold hover:text-gray-600 hover:border-l" href="#">Nav 1</a></li>
<li class="inline"><a class="inline-block p-1 p-2 font-bold hover:text-gray-600 hover:border-l" href="#">Nav 2</a></li>
<li class="inline"><a class="inline-block p-1 p-2 font-bold hover:text-gray-600 hover:border-l" href="#">Nav 3</a></li>
<li class="inline"><a class="inline-block py-1 px-2 font-bold hover:text-gray-600 hover:border-l" href="#">Nav 4</a></li>
</ul>
</nav>
</div>
</div>
Alerts
Notification alert:
Success
Hello i'm a notification. Please read the follwing messages
<div class="flex items-center rounded bg-accent px-5 py-6">
<div class="text-black mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" overflow="scroll">
<style>
.st0{fill:currentColor}
</style>
<path class="st0" d="M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0zm5.4 7L10 13.2l-1.3 1.5c-.2.2-.5.2-.7.1l-3.3-2.9c-.2-.2-.2-.5-.1-.7l1-1.1c.2-.3.5-.3.7-.1l1.4 1.2c.2.2.5.2.7-.1l5.1-5.8c.2-.2.5-.2.7-.1l1.1 1c.2.2.3.6.1.8z"/>
</svg>
</div>
<div class="flex flex-col">
<h4 class="text-lg font-bold text-black">Success</h4>
<p class="text-black">Hello i'm a notification. Please read the follwing messages</p>
</div>
</div>
Warning alert:
Warning
Hello i'm a notification. Please read the follwing messages
<div class="flex items-center rounded bg-orange-400 px-5 py-6">
<div class="text-black mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" overflow="scroll">
<style>
.st0{fill:currentColor}
</style>
<path class="st0" d="M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0zm1 16.3c0 .1 0 .2-.1.3s-.2.1-.3.1H8.8c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3v-1.6c0-.1 0-.2.1-.3s.2-.1.3-.1h1.8c.1 0 .2 0 .3.1.1.1.1.2.1.3v1.6zm2.7-7.6c-.3.4-.7 1-1.2 1.5-.4.4-.7.8-.9 1.1-.2.3-.4.6-.4.9 0 .3-.1.5-.1.6-.1.2-.1.3-.2.3-.1.1-.2.1-.3.1H8.8c-.1 0-.2 0-.3-.1-.1-.1-.1-.2-.1-.3v-.6c.1-.6.2-1.1.5-1.5.3-.4.7-.9 1.2-1.4.4-.4.7-.7.9-1 .2-.3.3-.5.3-.8 0-.5-.1-.9-.5-1.2-.1-.1-.6-.3-1.1-.3-1.2 0-1.9.6-2.1 1.8-.1.2-.3.4-.5.4H5.5c-.1 0-.2 0-.3-.1-.1-.1-.1-.2-.1-.4 0-.7.2-1.3.6-1.9s.9-1 1.6-1.4 1.5-.5 2.5-.5 1.8.2 2.5.5c.6.3 1.1.7 1.4 1.2s.4 1 .4 1.5c0 .7-.1 1.2-.4 1.6z"/>
</svg>
</div>
<div class="flex flex-col">
<h4 class="text-lg text-black font-bold">Warning</h4>
<p class="text-black">Hello i'm a notification. Please read the follwing messages</p>
</div>
</div>
Danger alert:
Danger
Hello i'm a notification. Please read the follwing messages
<div class="flex items-center rounded bg-red-500 px-5 py-6">
<div class="text-black mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" overflow="scroll">
<style>
.st0{fill:currentColor}
</style>
<path class="st0" d="M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0zm1.6 15.5c0 .6-.4 1-1 1H9.4c-.6 0-1-.4-1-1v-1.3c0-.6.4-1 1-1h1.3c.6 0 1 .4 1 1v1.3zm0-4.4c0 .6-.4 1-1 1H9.4c-.6 0-1-.4-1-1V4.5c0-.6.4-1 1-1h1.3c.6 0 1 .4 1 1v6.6z"/>
</svg>
</div>
<div class="flex flex-col">
<h4 class="text-lg text-black font-bold">Danger</h4>
<p class="text-black">Hello i'm a notification. Please read the follwing messages</p>
</div>
</div>