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
Legend indicator
A component to indicate properties of elements.
Example
Copied!
Legend indicator
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-gray-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Legend indicator</span>
</div>
Color variations
Copied!
Dark
Gray
Red
Yellow
Green
Blue
Indigo
Purple
Pink
Light
<div class="grid grid-cols-1">
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-gray-800 rounded-full me-2 dark:bg-white"></span>
<span class="text-gray-600 dark:text-gray-400">Dark</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-gray-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Gray</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-red-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Red</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-yellow-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Yellow</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-green-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Green</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-blue-600 rounded-full me-2 dark:bg-blue-500"></span>
<span class="text-gray-600 dark:text-gray-400">Blue</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-indigo-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Indigo</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-purple-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Purple</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-pink-500 rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Pink</span>
</div>
<div class="inline-flex items-center">
<span class="size-2 inline-block bg-white rounded-full me-2"></span>
<span class="text-gray-600 dark:text-gray-400">Light</span>
</div>
</div>