🌐HTML Components
TailAdmin HTML: Tailwind + Alpine.js has more than 200 components, and you can use them to build any kind of dashboard you need.
Here are a few examples of the components:
Form Input Field:
We got all the form elements. And below are the form’s input field. The input fields have three different states, Default, Active and Disabled. You can use them according to your need.
<div>
<label class="mb-3 block text-black dark:text-white">
Default Input
</label>
<input type="text" placeholder="Default Input"
class="border-stroke dark:border-form-strokedark dark:bg-form-input focus:border-primary dark:focus:border-primary active:border-primary bg-transparent w-full rounded-lg border-[1.5px] py-3 px-5 font-medium outline-none transition disabled:cursor-default disabled:bg-whiter">
</div>
<div>
<label class="mb-3 block text-black dark:text-white">
Active Input
</label>
<input type="text" placeholder="Active Input"
class="border-primary focus:border-primary active:border-primary dark:bg-form-input bg-transparent w-full rounded-lg border-[1.5px] py-3 px-5 font-medium outline-none transition disabled:cursor-default disabled:bg-whiter" />
</div>
<div>
<label class="mb-3 block font-medium text-black dark:text-white">
Disabled label
</label>
<input type="text" placeholder="Disabled label" disabled=""
class="border-stroke dark:border-form-strokedark dark:bg-form-input focus:border-primary dark:focus:border-primary active:border-primary bg-transparent w-full rounded-lg border-[1.5px] py-3 px-5 font-medium outline-none transition disabled:cursor-default disabled:bg-whiter dark:disabled:bg-black" />
</div>Analytics Chart:
TailAdmin offers all types of charts for managing site analytics. You can utilize them to manage and improve your site.
Here’s an example of a visitor analytics chart.
<div class="col-span-12 flex flex-wrap items-center justify-between gap-3">
<!-- Datepicker built with flatpickr -->
<div class="relative">
<input
class="datepicker w-[120%] rounded border border-stroke bg-white py-2 pl-10 pr-4 text-sm font-medium shadow-card-2 focus-visible:outline-none dark:border-strokedark dark:bg-boxdark"
placeholder="Select dates"
data-class="flatpickr-right"
/>
<div
class="pointer-events-none absolute inset-0 left-4 right-auto flex items-center"
>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.75 3.75C3.33579 3.75 3 4.08579 3 4.5V15C3 15.4142 3.33579 15.75 3.75 15.75H14.25C14.6642 15.75 15 15.4142 15 15V4.5C15 4.08579 14.6642 3.75 14.25 3.75H3.75ZM1.5 4.5C1.5 3.25736 2.50736 2.25 3.75 2.25H14.25C15.4926 2.25 16.5 3.25736 16.5 4.5V15C16.5 16.2426 15.4926 17.25 14.25 17.25H3.75C2.50736 17.25 1.5 16.2426 1.5 15V4.5Z"
fill="#64748B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0.75C12.4142 0.75 12.75 1.08579 12.75 1.5V4.5C12.75 4.91421 12.4142 5.25 12 5.25C11.5858 5.25 11.25 4.91421 11.25 4.5V1.5C11.25 1.08579 11.5858 0.75 12 0.75Z"
fill="#64748B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 0.75C6.41421 0.75 6.75 1.08579 6.75 1.5V4.5C6.75 4.91421 6.41421 5.25 6 5.25C5.58579 5.25 5.25 4.91421 5.25 4.5V1.5C5.25 1.08579 5.58579 0.75 6 0.75Z"
fill="#64748B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.5 7.5C1.5 7.08579 1.83579 6.75 2.25 6.75H15.75C16.1642 6.75 16.5 7.08579 16.5 7.5C16.5 7.91422 16.1642 8.25 15.75 8.25H2.25C1.83579 8.25 1.5 7.91422 1.5 7.5Z"
fill="#64748B"
/>
</svg>
</div>
</div>
<div
class="relative z-20 inline-block rounded bg-white shadow-card-2 dark:bg-boxdark"
>
<select
name=""
id=""
class="relative z-20 inline-flex appearance-none rounded border border-stroke bg-transparent py-2 pl-4 pr-9 text-sm outline-none dark:border-strokedark"
>
<option value="">Yearly</option>
<option value="">Monthly</option>
</select>
<span class="absolute top-1/2 right-3 z-10 -translate-y-1/2">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.96967 6.21967C4.26256 5.92678 4.73744 5.92678 5.03033 6.21967L9 10.1893L12.9697 6.21967C13.2626 5.92678 13.7374 5.92678 14.0303 6.21967C14.3232 6.51256 14.3232 6.98744 14.0303 7.28033L9.53033 11.7803C9.23744 12.0732 8.76256 12.0732 8.46967 11.7803L3.96967 7.28033C3.67678 6.98744 3.67678 6.51256 3.96967 6.21967Z"
fill="#64748B"
/>
</svg>
</span>
</div>
</div>
<include src="./partials/chart-04.html" />Todo List:
You can build a fully functional task manager inside your dashboard and manage tasks from there. You can use the Task Component for the tasks.
Here’s an example of the Task Component:
<div class="swim-lane flex flex-col gap-5.5">
<h4 class="text-xl font-bold text-black dark:text-white">To Do's (03)</h4>
<div
draggable="true"
class="task relative flex cursor-move justify-between rounded-sm border border-stroke bg-white p-7 shadow-default dark:border-strokedark dark:bg-boxdark"
>
<div>
<h5 class="mb-4 text-lg font-medium text-black dark:text-white">
Task title
</h5>
<div class="flex flex-col gap-2">
<label for="taskCheckbox1" class="cursor-pointer">
<div class="relative flex items-center pt-0.5">
<input
type="checkbox"
id="taskCheckbox1"
class="taskCheckbox sr-only"
/>
<div
class="box mr-3 flex h-5 w-5 items-center justify-center rounded border border-stroke dark:border-strokedark dark:bg-boxdark-2"
>
<span class="text-white opacity-0">
<svg
class="fill-current"
width="10"
height="7"
viewBox="0 0 10 7"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.70685 0.292804C9.89455 0.480344 10 0.734667 10 0.999847C10 1.26503 9.89455 1.51935 9.70685 1.70689L4.70059 6.7072C4.51283 6.89468 4.2582 7 3.9927 7C3.72721 7 3.47258 6.89468 3.28482 6.7072L0.281063 3.70701C0.0986771 3.5184 -0.00224342 3.26578 3.785e-05 3.00357C0.00231912 2.74136 0.10762 2.49053 0.29326 2.30511C0.4789 2.11969 0.730026 2.01451 0.992551 2.01224C1.25508 2.00996 1.50799 2.11076 1.69683 2.29293L3.9927 4.58607L8.29108 0.292804C8.47884 0.105322 8.73347 0 8.99896 0C9.26446 0 9.51908 0.105322 9.70685 0.292804Z"
fill=""
/>
</svg>
</span>
</div>
<p>Here is task one</p>
</div>
</label>
<label for="taskCheckbox2" class="cursor-pointer">
<div class="relative flex items-center pt-0.5">
<input
type="checkbox"
id="taskCheckbox2"
class="taskCheckbox sr-only"
checked
/>
<div
class="box mr-3 flex h-5 w-5 items-center justify-center rounded border border-stroke dark:border-strokedark dark:bg-boxdark-2"
>
<span class="text-white opacity-0">
<svg
class="fill-current"
width="10"
height="7"
viewBox="0 0 10 7"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.70685 0.292804C9.89455 0.480344 10 0.734667 10 0.999847C10 1.26503 9.89455 1.51935 9.70685 1.70689L4.70059 6.7072C4.51283 6.89468 4.2582 7 3.9927 7C3.72721 7 3.47258 6.89468 3.28482 6.7072L0.281063 3.70701C0.0986771 3.5184 -0.00224342 3.26578 3.785e-05 3.00357C0.00231912 2.74136 0.10762 2.49053 0.29326 2.30511C0.4789 2.11969 0.730026 2.01451 0.992551 2.01224C1.25508 2.00996 1.50799 2.11076 1.69683 2.29293L3.9927 4.58607L8.29108 0.292804C8.47884 0.105322 8.73347 0 8.99896 0C9.26446 0 9.51908 0.105322 9.70685 0.292804Z"
fill=""
/>
</svg>
</span>
</div>
<p>Here is task Two</p>
</div>
</label>
<label for="taskCheckbox3" class="cursor-pointer">
<div class="relative flex items-center pt-0.5">
<input
type="checkbox"
id="taskCheckbox3"
class="taskCheckbox sr-only"
/>
<div
class="box mr-3 flex h-5 w-5 items-center justify-center rounded border border-stroke dark:border-strokedark dark:bg-boxdark-2"
>
<span class="text-white opacity-0">
<svg
class="fill-current"
width="10"
height="7"
viewBox="0 0 10 7"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.70685 0.292804C9.89455 0.480344 10 0.734667 10 0.999847C10 1.26503 9.89455 1.51935 9.70685 1.70689L4.70059 6.7072C4.51283 6.89468 4.2582 7 3.9927 7C3.72721 7 3.47258 6.89468 3.28482 6.7072L0.281063 3.70701C0.0986771 3.5184 -0.00224342 3.26578 3.785e-05 3.00357C0.00231912 2.74136 0.10762 2.49053 0.29326 2.30511C0.4789 2.11969 0.730026 2.01451 0.992551 2.01224C1.25508 2.00996 1.50799 2.11076 1.69683 2.29293L3.9927 4.58607L8.29108 0.292804C8.47884 0.105322 8.73347 0 8.99896 0C9.26446 0 9.51908 0.105322 9.70685 0.292804Z"
fill=""
/>
</svg>
</span>
</div>
<p>Here is task Three</p>
</div>
</label>
</div>
</div>
<div class="absolute right-4 top-4">
<div x-data="{openDropDown: false}" class="relative">
<button @click="openDropDown = !openDropDown">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
d="M2.25 11.25C3.49264 11.25 4.5 10.2426 4.5 9C4.5 7.75736 3.49264 6.75 2.25 6.75C1.00736 6.75 0 7.75736 0 9C0 10.2426 1.00736 11.25 2.25 11.25Z"
fill="#98A6AD"
/>
<path
d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z"
fill="#98A6AD"
/>
<path
d="M15.75 11.25C16.9926 11.25 18 10.2426 18 9C18 7.75736 16.9926 6.75 15.75 6.75C14.5074 6.75 13.5 7.75736 13.5 9C13.5 10.2426 14.5074 11.25 15.75 11.25Z"
fill="#98A6AD"
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark"
>
<button
class="flex w-full items-center gap-2 rounded-sm py-1.5 px-4 text-left text-sm hover:bg-gray dark:hover:bg-meta-4"
>
<svg
class="fill-current"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<g clip-path="url(#clip0_62_9787)">
<path
d="M15.55 2.97499C15.55 2.77499 15.475 2.57499 15.325 2.42499C15.025 2.12499 14.725 1.82499 14.45 1.52499C14.175 1.24999 13.925 0.974987 13.65 0.724987C13.525 0.574987 13.375 0.474986 13.175 0.449986C12.95 0.424986 12.75 0.474986 12.575 0.624987L10.875 2.32499H2.02495C1.17495 2.32499 0.449951 3.02499 0.449951 3.89999V14C0.449951 14.85 1.14995 15.575 2.02495 15.575H12.15C13 15.575 13.725 14.875 13.725 14V5.12499L15.35 3.49999C15.475 3.34999 15.55 3.17499 15.55 2.97499ZM8.19995 8.99999C8.17495 9.02499 8.17495 9.02499 8.14995 9.02499L6.34995 9.62499L6.94995 7.82499C6.94995 7.79999 6.97495 7.79999 6.97495 7.77499L11.475 3.27499L12.725 4.49999L8.19995 8.99999ZM12.575 14C12.575 14.25 12.375 14.45 12.125 14.45H2.02495C1.77495 14.45 1.57495 14.25 1.57495 14V3.87499C1.57495 3.62499 1.77495 3.42499 2.02495 3.42499H9.72495L6.17495 6.99999C6.04995 7.12499 5.92495 7.29999 5.87495 7.49999L4.94995 10.3C4.87495 10.5 4.92495 10.675 5.02495 10.85C5.09995 10.95 5.24995 11.1 5.52495 11.1H5.62495L8.49995 10.15C8.67495 10.1 8.84995 9.97499 8.97495 9.84999L12.575 6.24999V14ZM13.5 3.72499L12.25 2.49999L13.025 1.72499C13.225 1.92499 14.05 2.74999 14.25 2.97499L13.5 3.72499Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_62_9787">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
Edit
</button>
<button
class="flex w-full items-center gap-2 rounded-sm py-1.5 px-4 text-left text-sm hover:bg-gray dark:hover:bg-meta-4"
>
<svg
class="fill-current"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
d="M12.225 2.20005H10.3V1.77505C10.3 1.02505 9.70005 0.425049 8.95005 0.425049H7.02505C6.27505 0.425049 5.67505 1.02505 5.67505 1.77505V2.20005H3.75005C3.02505 2.20005 2.42505 2.80005 2.42505 3.52505V4.27505C2.42505 4.82505 2.75005 5.27505 3.22505 5.47505L3.62505 13.75C3.67505 14.775 4.52505 15.575 5.55005 15.575H10.4C11.425 15.575 12.275 14.775 12.325 13.75L12.75 5.45005C13.225 5.25005 13.55 4.77505 13.55 4.25005V3.50005C13.55 2.80005 12.95 2.20005 12.225 2.20005ZM6.82505 1.77505C6.82505 1.65005 6.92505 1.55005 7.05005 1.55005H8.97505C9.10005 1.55005 9.20005 1.65005 9.20005 1.77505V2.20005H6.85005V1.77505H6.82505ZM3.57505 3.52505C3.57505 3.42505 3.65005 3.32505 3.77505 3.32505H12.225C12.325 3.32505 12.425 3.40005 12.425 3.52505V4.27505C12.425 4.37505 12.35 4.47505 12.225 4.47505H3.77505C3.67505 4.47505 3.57505 4.40005 3.57505 4.27505V3.52505V3.52505ZM10.425 14.45H5.57505C5.15005 14.45 4.80005 14.125 4.77505 13.675L4.40005 5.57505H11.625L11.25 13.675C11.2 14.1 10.85 14.45 10.425 14.45Z"
fill=""
/>
<path
d="M8.00005 8.1001C7.70005 8.1001 7.42505 8.3501 7.42505 8.6751V11.8501C7.42505 12.1501 7.67505 12.4251 8.00005 12.4251C8.30005 12.4251 8.57505 12.1751 8.57505 11.8501V8.6751C8.57505 8.3501 8.30005 8.1001 8.00005 8.1001Z"
fill=""
/>
<path
d="M9.99994 8.60004C9.67494 8.57504 9.42494 8.80004 9.39994 9.12504L9.24994 11.325C9.22494 11.625 9.44994 11.9 9.77494 11.925C9.79994 11.925 9.79994 11.925 9.82494 11.925C10.1249 11.925 10.3749 11.7 10.3749 11.4L10.5249 9.20004C10.5249 8.87504 10.2999 8.62504 9.99994 8.60004Z"
fill=""
/>
<path
d="M5.97497 8.60004C5.67497 8.62504 5.42497 8.90004 5.44997 9.20004L5.62497 11.4C5.64997 11.7 5.89997 11.925 6.17497 11.925C6.19997 11.925 6.19997 11.925 6.22497 11.925C6.52497 11.9 6.77497 11.625 6.74997 11.325L6.57497 9.12504C6.57497 8.80004 6.29997 8.57504 5.97497 8.60004Z"
fill=""
/>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>
</div>Last updated
