TailApp
A generic project management web app
<!--
TailApp - A generic project management web app
Created by John Champ
Founder of Pixelcave -> https://pixelcave.com
Building Tailkit -> https://tailkit.com
Let's connect on X -> https://x.com/pixelcave_john
on Bluesky -> https://bsky.app/profile/pixelcave-john.bsky.social
-->
<div x-data="{ mobileSidebarOpen: false }">
<!-- Page Container -->
<div
id="page-container"
class="mx-auto flex min-h-screen w-full min-w-[320px] flex-col bg-white lg:ps-64"
>
<!-- Page Sidebar -->
<nav
id="page-sidebar"
class="fixed start-0 top-0 bottom-0 z-50 flex h-full w-80 flex-col overflow-auto bg-slate-100 transition-transform duration-500 ease-out lg:w-64 lg:ltr:translate-x-0 lg:rtl:translate-x-0"
x-bind:class="{
'ltr:-translate-x-full rtl:translate-x-full': !mobileSidebarOpen,
'translate-x-0': mobileSidebarOpen,
}"
aria-label="Main Sidebar Navigation"
x-cloak
>
<!-- Sidebar Header -->
<div
class="flex h-20 w-full flex-none items-center justify-between px-8"
>
<!-- Brand -->
<a
href="javascript:void(0)"
class="inline-flex items-center gap-2 text-lg font-bold tracking-wide text-slate-800 transition hover:opacity-75 active:opacity-100"
>
<svg
class="bi bi-window-sidebar inline-block size-4 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
/>
<path
d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v2H1V3a1 1 0 0 1 1-1h12zM1 13V6h4v8H2a1 1 0 0 1-1-1zm5 1V6h9v7a1 1 0 0 1-1 1H6z"
/>
</svg>
<span
>tail<span class="font-medium text-blue-600">app</span></span
>
</a>
<!-- END Brand -->
<!-- Close Sidebar on Mobile -->
<div class="lg:hidden">
<button
type="button"
class="flex size-10 items-center justify-center text-slate-400 hover:text-slate-600 active:text-slate-400"
x-on:click="mobileSidebarOpen = false"
>
<svg
class="hi-solid hi-x -mx-1 inline-block size-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<!-- END Close Sidebar on Mobile -->
</div>
<!-- END Sidebar Header -->
<!-- Main Navigation -->
<div class="w-full grow space-y-3 p-4">
<a
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg bg-white px-4 py-2.5 font-semibold text-slate-600 shadow-xs shadow-slate-300/50"
>
<svg
class="bi bi-house-heart-fill inline-block size-4 text-slate-400"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M7.293 1.5a1 1 0 0 1 1.414 0L11 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l2.354 2.353a.5.5 0 0 1-.708.707L8 2.207 1.354 8.853a.5.5 0 1 1-.708-.707L7.293 1.5Z"
/>
<path
d="m14 9.293-6-6-6 6V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9.293Zm-6-.811c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.691 0-5.018Z"
/>
</svg>
<span>Dashboard</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-4 py-2.5 font-semibold text-slate-600 hover:bg-white hover:shadow-xs hover:shadow-slate-300/50 active:bg-white/75 active:text-slate-800 active:shadow-slate-300/10"
>
<svg
class="bi bi-briefcase-fill inline-block size-4 text-slate-400"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5z"
/>
<path
d="M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85v5.65z"
/>
</svg>
<span>Projects</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-4 py-2.5 font-semibold text-slate-600 hover:bg-white hover:shadow-xs hover:shadow-slate-300/50 active:bg-white/75 active:text-slate-800 active:shadow-slate-300/10"
>
<svg
class="bi bi-people-fill inline-block size-4 text-slate-400"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
/>
<path
fill-rule="evenodd"
d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"
/>
<path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
</svg>
<span>Customers</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-4 py-2.5 font-semibold text-slate-600 hover:bg-white hover:shadow-xs hover:shadow-slate-300/50 active:bg-white/75 active:text-slate-800 active:shadow-slate-300/10"
>
<svg
class="bi bi-file-earmark-text-fill inline-block size-4 text-slate-400"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z"
/>
</svg>
<span>Invoices</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-4 py-2.5 font-semibold text-slate-600 hover:bg-white hover:shadow-xs hover:shadow-slate-300/50 active:bg-white/75 active:text-slate-800 active:shadow-slate-300/10"
>
<svg
class="bi bi-life-preserver inline-block size-4 text-slate-400"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm6.43-5.228a7.025 7.025 0 0 1-3.658 3.658l-1.115-2.788a4.015 4.015 0 0 0 1.985-1.985l2.788 1.115zM5.228 14.43a7.025 7.025 0 0 1-3.658-3.658l2.788-1.115a4.015 4.015 0 0 0 1.985 1.985L5.228 14.43zm9.202-9.202-2.788 1.115a4.015 4.015 0 0 0-1.985-1.985l1.115-2.788a7.025 7.025 0 0 1 3.658 3.658zm-8.087-.87a4.015 4.015 0 0 0-1.985 1.985L1.57 5.228A7.025 7.025 0 0 1 5.228 1.57l1.115 2.788zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"
/>
</svg>
<span>Support</span>
</a>
</div>
<!-- END Main Navigation -->
<!-- Sub Navigation -->
<div class="w-full flex-none space-y-3 p-4">
<a
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-4 py-2.5 font-semibold text-slate-600 hover:bg-white hover:shadow-xs hover:shadow-slate-300/50 active:bg-white/75 active:text-slate-800 active:shadow-slate-300/10"
>
<svg
class="bi bi-gear-fill inline-block size-4 text-slate-400"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
/>
</svg>
<span>Settings</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-4 py-2.5 font-semibold text-slate-600 hover:bg-white hover:shadow-xs hover:shadow-slate-300/50 active:bg-white/75 active:text-slate-800 active:shadow-slate-300/10"
>
<svg
class="bi bi-lock-fill inline-block size-4 text-slate-400"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"
/>
</svg>
<span>Logout</span>
</a>
</div>
<!-- END Sub Navigation -->
</nav>
<!-- Page Sidebar -->
<!-- Page Header -->
<header
id="page-header"
class="fixed start-0 end-0 top-0 z-30 flex h-20 flex-none items-center bg-white shadow-xs lg:hidden"
>
<div
class="container mx-auto flex justify-between px-4 lg:px-8 xl:max-w-7xl"
>
<!-- Left Section -->
<div class="flex items-center gap-2">
<!-- Toggle Sidebar on Mobile -->
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-sm border border-slate-200 bg-white px-2 py-1.5 leading-6 font-semibold text-slate-800 shadow-xs hover:border-slate-300 hover:bg-slate-100 hover:text-slate-800 hover:shadow-sm focus:ring-3 focus:ring-slate-500/25 focus:outline-hidden active:border-white active:bg-white active:shadow-none"
x-on:click="mobileSidebarOpen = true"
>
<svg
class="hi-solid hi-menu-alt-1 inline-block size-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- END Toggle Sidebar on Mobile -->
</div>
<!-- END Left Section -->
<!-- Middle Section -->
<div class="flex items-center gap-2">
<!-- Brand -->
<a
href="javascript:void(0)"
class="inline-flex items-center gap-2 text-lg font-bold tracking-wide text-slate-800 transition hover:opacity-75 active:opacity-100"
>
<svg
class="bi bi-window-sidebar inline-block size-4 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
/>
<path
d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v2H1V3a1 1 0 0 1 1-1h12zM1 13V6h4v8H2a1 1 0 0 1-1-1zm5 1V6h9v7a1 1 0 0 1-1 1H6z"
/>
</svg>
<span
>tail<span class="font-medium text-blue-600">app</span></span
>
</a>
<!-- END Brand -->
</div>
<!-- END Middle Section -->
<!-- Right Section -->
<div class="flex items-center gap-2">
<!-- Settings -->
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-sm border border-slate-200 bg-white px-2 py-1.5 leading-6 font-semibold text-slate-800 shadow-xs hover:border-slate-300 hover:bg-slate-100 hover:text-slate-800 hover:shadow-sm focus:ring-3 focus:ring-slate-500/25 focus:outline-hidden active:border-white active:bg-white active:shadow-none"
>
<svg
class="hi-solid hi-user-circle inline-block size-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
clip-rule="evenodd"
/>
</svg>
</a>
<!-- END Toggle Sidebar on Mobile -->
</div>
<!-- END Right Section -->
</div>
</header>
<!-- END Page Header -->
<!-- Page Content -->
<main
id="page-content"
class="flex max-w-full flex-auto flex-col pt-20 lg:pt-0"
>
<!-- Page Section -->
<div
class="container mx-auto space-y-10 px-4 py-8 lg:space-y-16 lg:px-8 lg:py-12 xl:max-w-7xl"
>
<!-- Overview -->
<div>
<h2 class="mb-2 text-3xl font-semibold">Overview</h2>
<h3 class="mb-8 text-sm font-medium text-slate-500">
Welcome John, everything looks great!
</h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:gap-8">
<!-- Projects Card -->
<a
href="javascript:void(0)"
class="flex flex-col rounded-2xl border border-slate-200 bg-white hover:border-slate-300 active:border-slate-200"
>
<div
class="flex w-full grow items-center justify-between p-5 lg:p-6"
>
<dl>
<dt class="text-2xl font-bold">4</dt>
<dd class="text-slate-600">Projects</dd>
</dl>
<div
class="flex size-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600"
>
<svg
class="bi bi-briefcase-fill inline-block size-4"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5z"
/>
<path
d="M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85v5.65z"
/>
</svg>
</div>
</div>
<div
class="w-full border-t border-slate-100 px-5 py-3 text-xs font-medium text-slate-500 lg:px-6"
>
<p>Currently active</p>
</div>
</a>
<!-- END Projects Card -->
<!-- Tickets Card -->
<a
href="javascript:void(0)"
class="flex flex-col rounded-2xl border border-slate-200 bg-white hover:border-slate-300 active:border-slate-200"
>
<div
class="flex w-full grow items-center justify-between p-5 lg:p-6"
>
<dl>
<dt class="text-2xl font-bold">20</dt>
<dd class="text-slate-600">Tickets</dd>
</dl>
<div
class="flex size-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600"
>
<svg
class="bi bi-life-preserver inline-block size-4"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm6.43-5.228a7.025 7.025 0 0 1-3.658 3.658l-1.115-2.788a4.015 4.015 0 0 0 1.985-1.985l2.788 1.115zM5.228 14.43a7.025 7.025 0 0 1-3.658-3.658l2.788-1.115a4.015 4.015 0 0 0 1.985 1.985L5.228 14.43zm9.202-9.202-2.788 1.115a4.015 4.015 0 0 0-1.985-1.985l1.115-2.788a7.025 7.025 0 0 1 3.658 3.658zm-8.087-.87a4.015 4.015 0 0 0-1.985 1.985L1.57 5.228A7.025 7.025 0 0 1 5.228 1.57l1.115 2.788zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"
/>
</svg>
</div>
</div>
<div
class="w-full border-t border-slate-100 px-5 py-3 text-xs font-medium text-slate-500 lg:px-6"
>
<p>Currently open and pending</p>
</div>
</a>
<!-- END Tickets Card -->
<!-- Customers Card -->
<a
href="javascript:void(0)"
class="flex flex-col rounded-2xl border border-slate-200 bg-white hover:border-slate-300 active:border-slate-200"
>
<div
class="flex w-full grow items-center justify-between p-5 lg:p-6"
>
<dl>
<dt class="text-2xl font-bold">782</dt>
<dd class="text-slate-600">Customers</dd>
</dl>
<div
class="flex size-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600"
>
<svg
class="bi bi-people-fill inline-block size-4"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
/>
<path
fill-rule="evenodd"
d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"
/>
<path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
</svg>
</div>
</div>
<div
class="w-full border-t border-slate-100 px-5 py-3 text-xs font-medium text-slate-500 lg:px-6"
>
<p>All active accounts</p>
</div>
</a>
<!-- END Customers Card -->
</div>
</div>
<!-- END Overview -->
<!-- Projects -->
<div>
<h2 class="mb-2 text-3xl font-semibold">Projects</h2>
<h3 class="mb-8 text-sm font-medium text-slate-500">
You've completed over
<span class="font-semibold">200 projects</span> till now, keep
it up!
</h3>
<!-- Projects Grid -->
<div
class="grid grid-cols-1 items-start gap-4 md:grid-cols-2 xl:grid-cols-4"
>
<!-- Project #1 -->
<div class="space-y-4 rounded-xl border border-slate-200 p-5">
<div>
<h4
class="mb-1 flex items-center justify-between gap-2 font-semibold"
>
<span>Dashboard Design</span>
<a
href="javascript:void(0)"
class="text-sm font-medium text-blue-600 transition hover:text-blue-700"
>
<svg
class="hi-solid hi-external-link inline-block size-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
/>
<path
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
/>
</svg>
</a>
</h4>
<h5 class="text-sm text-slate-600">
Project for
<a
href="javascript:void(0)"
class="font-medium text-blue-600 transition hover:text-blue-700"
>Jeremy Smith</a
>
</h5>
</div>
<div class="space-y-3">
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-orange-400"></div>
<p>Main Layout</p>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-emerald-400"></div>
<p>Dashboard Icons</p>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-orange-400"></div>
<p>Auth Pages</p>
<div class="flex items-center gap-2 text-slate-400">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-eye inline-block size-5"
>
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
<path
fill-rule="evenodd"
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
clip-rule="evenodd"
></path>
</svg>
<div class="inline-flex items-center gap-1.5">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-annotation inline-block size-5"
>
<path
fill-rule="evenodd"
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
4
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-emerald-400"></div>
<p>Logo Design</p>
</div>
</a>
</div>
</div>
<!-- END Project #1 -->
<!-- Project #2 -->
<div class="space-y-4 rounded-xl border border-slate-200 p-5">
<div>
<h4
class="mb-1 flex items-center justify-between gap-2 font-semibold"
>
<span>5 Clean Logos</span>
<a
href="javascript:void(0)"
class="text-sm font-medium text-blue-600 transition hover:text-blue-700"
>
<svg
class="hi-solid hi-external-link inline-block size-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
/>
<path
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
/>
</svg>
</a>
</h4>
<h5 class="text-sm text-slate-600">
Project for
<a
href="javascript:void(0)"
class="font-medium text-blue-600 transition hover:text-blue-700"
>Alex Saunders</a
>
</h5>
</div>
<div class="space-y-3">
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-emerald-400"></div>
<p>Exploring concepts</p>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-orange-400"></div>
<p>Main Layout</p>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-orange-400"></div>
<p>Implement designs</p>
<div class="flex items-center gap-2 text-slate-400">
<div class="inline-flex items-center gap-1.5">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-annotation inline-block size-5"
>
<path
fill-rule="evenodd"
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
2
</div>
</div>
</div>
</a>
</div>
</div>
<!-- END Project #2 -->
<!-- Project #3 -->
<div class="space-y-4 rounded-xl border border-slate-200 p-5">
<div>
<h4
class="mb-1 flex items-center justify-between gap-2 font-semibold"
>
<span>SEO Marketing</span>
<a
href="javascript:void(0)"
class="text-sm font-medium text-blue-600 transition hover:text-blue-700"
>
<svg
class="hi-solid hi-external-link inline-block size-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
/>
<path
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
/>
</svg>
</a>
</h4>
<h5 class="text-sm text-slate-600">
Project for
<a
href="javascript:void(0)"
class="font-medium text-blue-600 transition hover:text-blue-700"
>Anna Doe</a
>
</h5>
</div>
<div class="space-y-3">
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-orange-400"></div>
<p>Writing posts</p>
<div class="flex items-center gap-2 text-slate-400">
<div class="inline-flex items-center gap-1.5">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-annotation inline-block size-5"
>
<path
fill-rule="evenodd"
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
2
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-emerald-400"></div>
<p>Improving website markup</p>
<div class="flex items-center gap-2 text-slate-400">
<div class="inline-flex items-center gap-1.5">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-annotation inline-block size-5"
>
<path
fill-rule="evenodd"
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
6
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-purple-400"></div>
<p>Best Practices</p>
<div class="flex items-center gap-2 text-slate-400">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-eye inline-block size-5"
>
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
<path
fill-rule="evenodd"
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
clip-rule="evenodd"
></path>
</svg>
<div class="inline-flex items-center gap-1.5">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-annotation inline-block size-5"
>
<path
fill-rule="evenodd"
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
7
</div>
</div>
</div>
</a>
</div>
</div>
<!-- END Project #3 -->
<!-- Project #4 -->
<div class="space-y-4 rounded-xl border border-slate-200 p-5">
<div>
<h4
class="mb-1 flex items-center justify-between gap-2 font-semibold"
>
<span>Mobile App</span>
<a
href="javascript:void(0)"
class="text-sm font-medium text-blue-600 transition hover:text-blue-700"
>
<svg
class="hi-solid hi-external-link inline-block size-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
/>
<path
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
/>
</svg>
</a>
</h4>
<h5 class="text-sm text-slate-600">
Project for
<a
href="javascript:void(0)"
class="font-medium text-blue-600 transition hover:text-blue-700"
>John Smith</a
>
</h5>
</div>
<div class="space-y-3">
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-orange-400"></div>
<p>Prototype</p>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-pink-400"></div>
<p>Platforms</p>
<div class="flex items-center gap-2 text-slate-400">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-eye inline-block size-5"
>
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
<path
fill-rule="evenodd"
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
clip-rule="evenodd"
></path>
</svg>
<div class="inline-flex items-center gap-1.5">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-annotation inline-block size-5"
>
<path
fill-rule="evenodd"
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
6
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="flex flex-col rounded-sm bg-slate-50 hover:bg-slate-100 active:bg-slate-50"
>
<div class="space-y-2 p-3 text-sm">
<div class="h-1.5 w-8 rounded-sm bg-pink-400"></div>
<p>Logo Design</p>
<div class="flex items-center gap-2 text-slate-400">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-eye inline-block size-5"
>
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
<path
fill-rule="evenodd"
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
clip-rule="evenodd"
></path>
</svg>
<div class="inline-flex items-center gap-1.5">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-annotation inline-block size-5"
>
<path
fill-rule="evenodd"
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
4
</div>
</div>
</div>
</a>
</div>
</div>
<!-- END Project #4 -->
</div>
<!-- END Projects Grid -->
</div>
<!-- END Projects -->
<!-- Customers -->
<div>
<h2 class="mb-2 text-3xl font-semibold">Customers</h2>
<h3 class="mb-8 text-sm font-medium text-slate-500">
You've gained
<span class="font-semibold">3 new customers</span> today,
amazing!
</h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:gap-8">
<!-- User With Project Card -->
<a
href="javascript:void(0)"
class="flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white hover:border-slate-300 active:border-slate-200"
>
<div class="w-full grow p-5 text-center lg:p-6">
<img
src="https://images.unsplash.com/photo-1567186937675-a5131c8a89ea?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=160&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=160"
alt="User Avatar"
class="mb-4 inline-block size-16 rounded-full"
/>
<h4 class="font-semibold">Jeremy Theodore</h4>
<p class="text-sm font-medium text-slate-500">
j.theodore@example.com
</p>
</div>
<div
class="flex w-full items-center justify-between gap-2 border-t border-slate-100 px-5 py-4 text-sm font-medium lg:px-6"
>
<span
>Invited you to start
<span class="font-semibold"
>Landing Illustrations</span
></span
>
<svg
class="hi-solid hi-arrow-right inline-block size-5 text-blue-600"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</div>
</a>
<!-- END User With Project Card -->
<!-- User With Project Card -->
<a
href="javascript:void(0)"
class="flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white hover:border-slate-300 active:border-slate-200"
>
<div class="w-full grow p-5 text-center lg:p-6">
<img
src="https://images.unsplash.com/photo-1514846326710-096e4a8035e0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=160&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MjYzODYzMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=160"
alt="User Avatar"
class="mb-4 inline-block size-16 rounded-full"
/>
<h4 class="font-semibold">Sue Keller</h4>
<p class="text-sm font-medium text-slate-500">
s.keller@example.com
</p>
</div>
<div
class="flex w-full items-center justify-between gap-2 border-t border-slate-100 px-5 py-4 text-sm font-medium lg:px-6"
>
<span
>Invited you to start
<span class="font-semibold">Dashboard Design</span></span
>
<svg
class="hi-solid hi-arrow-right inline-block size-5 text-blue-600"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</div>
</a>
<!-- END User With Project Card -->
<!-- User With Project Card -->
<a
href="javascript:void(0)"
class="flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white hover:border-slate-300 active:border-slate-200"
>
<div class="w-full grow p-5 text-center lg:p-6">
<img
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=160&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=160"
alt="User Avatar"
class="mb-4 inline-block size-16 rounded-full"
/>
<h4 class="font-semibold">Alex Saunders</h4>
<p class="text-sm font-medium text-slate-500">
a.sanders@example.com
</p>
</div>
<div
class="flex w-full items-center justify-between gap-2 border-t border-slate-100 px-5 py-4 text-sm font-medium lg:px-6"
>
<span
>Invited you to start
<span class="font-semibold">5 Clean Logos</span></span
>
<svg
class="hi-solid hi-arrow-right inline-block size-5 text-blue-600"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</div>
</a>
<!-- END User With Project Card -->
</div>
</div>
<!-- END Customers -->
</div>
<!-- END Page Section -->
</main>
<!-- END Page Content -->
<!-- Page Footer -->
<footer
id="page-footer"
class="flex grow-0 items-center border-t border-slate-100"
>
<div
class="container mx-auto flex flex-col gap-2 px-4 py-6 text-center text-sm font-medium text-slate-600 md:flex-row md:justify-between md:gap-0 md:text-start lg:px-8 xl:max-w-7xl"
>
<div>© <span class="font-semibold">tailapp</span></div>
<div class="inline-flex items-center justify-center">
<span>Crafted with</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="mx-1 size-4 text-red-600"
>
<path
d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z"
></path>
</svg>
<span
>by
<a
class="font-medium text-blue-600 transition hover:text-blue-700"
href="https://pixelcave.com"
target="_blank"
>pixelcave</a
></span
>
</div>
</div>
</footer>
<!-- END Page Footer -->
</div>
<!-- END Page Container -->
</div>
Unlock an exclusive dashboard and get early access to all the new ones!
Join our pixelcave newsletter today, and we’ll send you a custom UI Design Kit which includes an exclusive dashboard template and many other free Tailwind CSS templates, just for you! Also, you will be the first to get any upcoming dashboards.