DocsComponents
🌐 HTML Components
TailAdmin HTML offers a variety of customizable components designed to enhance the user interface and improve the overall experience of your web application. These components are fully responsive, easy to integrate, and can be tailored to meet your specific design needs.
Below are a few examples of the components:
Alert Component:
Alerts are used to provide feedback messages to users.
Preview
<div
class="p-4 border rounded-xl border-success-500 bg-success-50 dark:border-success-500/30 dark:bg-success-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-success-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
<a
href="#"
class="inline-block mt-3 text-sm font-medium text-gray-500 underline dark:text-gray-400"
>
Learn more
</a>
</div>
</div>
</div>
<div
class="p-4 border rounded-xl border-success-500 bg-success-50 dark:border-success-500/30 dark:bg-success-500/15"
>
<div class="flex items-start gap-3">
<div class="-mt-0.5 text-success-500">
<svg
class="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
fill=""
/>
</svg>
</div>
<div>
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
</div>
</div>
</div>Avatar Component:
Avatars are used to display a user’s profile image or initials.
Preview
<div class="space-y-5 sm:space-y-6">
<div
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="px-6 py-5">
<h3 class="text-base font-medium text-gray-800 dark:text-white/90">
Default Avatar
</h3>
</div>
<div class="p-8 border-t border-gray-100 dark:border-gray-800">
<include src="./partials/avatar/avatar-01.html" />
</div>
</div>
<div
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="px-6 py-5">
<h3 class="text-base font-medium text-gray-800 dark:text-white/90">
Avatar with online indicator
</h3>
</div>
<div class="p-8 border-t border-gray-100 dark:border-gray-800">
<include src="./partials/avatar/avatar-02.html" />
</div>
</div>
<div
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="px-6 py-5">
<h3 class="text-base font-medium text-gray-800 dark:text-white/90">
Avatar with Offline indicator
</h3>
</div>
<div class="p-8 border-t border-gray-100 dark:border-gray-800">
<include src="./partials/avatar/avatar-03.html" />
</div>
</div>
<div
class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="px-6 py-5">
<h3 class="text-base font-medium text-gray-800 dark:text-white/90">
Avatar with busy indicator
</h3>
</div>
<div class="p-8 border-t border-gray-100 dark:border-gray-800">
<include src="./partials/avatar/avatar-04.html" />
</div>
</div>
</div>