Components
- Tailwind CSS Accordion
- Tailwind CSS Alert
- Tailwind CSS Avatar
- Dropdown example
- Dropdown hover
- Delay duration
- Dropdown divider
- carousels
- date Picker
- lists
- lists Group
- Legend indicator
- Progress
- Skelton
- Tailwind Css Ratings
- Tailwind css Spinners
- Tailwind Css Icons staick
- Tailwind Css Stipper
- Tailwind Css Toats
- Dropdown with checkbox
- Background hover
- Tailwind css Timeline
- Helper text
- navBar
- Section
- Tabs
Skelton
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet
Example
Copied!
<p class="h-4 bg-gray-200 rounded-full dark:bg-gray-700" style="width: 40%;"></p>
<ul class="mt-5 space-y-3">
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
</ul>
Complex combination
Copied!
<div class="flex">
<div class="flex-shrink-0">
<span class="size-12 block bg-gray-200 rounded-full dark:bg-gray-700"></span>
</div>
<div class="ms-4 mt-2 w-full">
<p class="h-4 bg-gray-200 rounded-full dark:bg-gray-700" style="width: 40%;"></p>
<ul class="mt-5 space-y-3">
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
</ul>
</div>
</div>
Active animation
Copied!
<div class="flex animate-pulse">
<div class="flex-shrink-0">
<span class="size-12 block bg-gray-200 rounded-full dark:bg-gray-700"></span>
</div>
<div class="ms-4 mt-2 w-full">
<p class="h-4 bg-gray-200 rounded-full dark:bg-gray-700" style="width: 40%;"></p>
<ul class="mt-5 space-y-3">
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
<li class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
</ul>
</div>
</div>