Tailwind Dashboards Components is a popular utility-first CSS framework that offers a wide range of pre-designed components and styles to help developers create modern and responsive user interfaces quickly. Here are some examples of dashboard components that are available in Tailwind CSS:
- Cards: Tailwind offers pre-designed cards that can be used to display various types of information such as statistics, charts, tables, and more. These cards come in different sizes and can be customized using Tailwind’s utility classes.
- Modals: Modals are used to display additional information or to prompt the user to take a specific action. Tailwind provides utility classes to create modals with different styles and animation effects.
- Navigation Menus: Navigation menus are used to provide users with quick access to different parts of the application. Tailwind offers different navigation menu styles, including dropdown menus, vertical menus, and horizontal menus.
- Tables: Tables are used to display tabular data in a structured and organized manner. Tailwind provides pre-designed table styles that can be customized using utility classes.
- Charts: Charts are used to display data in a graphical format. Tailwind provides utility classes to style different types of charts such as bar charts, line charts, and pie charts.
- Forms: Forms are used to collect user input. Tailwind offers pre-designed form styles that can be customized using utility classes. These styles include form inputs, labels, buttons, and validation messages.
These are just a few examples of the dashboard components available in Tailwind CSS. By using these pre-designed components and utility classes, developers can easily create professional-looking dashboards and user interfaces without spending too much time on CSS styling.
Component #1
<section class="py-3">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-3 -mb-8">
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
<div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center">
<h3 class="text-lg text-white font-semibold mr-2">To do</h3>
<span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">3</span>
</div>
<div>
<button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
</svg>
</button>
<a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
<svg width="12" height="4" viewbox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="h-1 w-full mb-4 rounded-full bg-purple-500"></div>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Implement Login</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-pink-400 rounded-full"></span>
<span class="text-xs font-medium text-pink-400">Development</span>
</div>
<p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Release MVP</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-xs font-medium text-green-500">Planning</span>
</div>
<p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 04</span>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-xs font-medium text-purple-500">Design</span>
</div>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
</div>
</div>
<div class="w-auto p-2">
<div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
<div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center">
<h3 class="text-lg text-white font-semibold mr-2">In progress</h3>
<span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">2</span>
</div>
<div>
<button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
</svg>
</button>
<a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
<svg width="12" height="4" viewbox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="h-1 w-full mb-4 rounded-full bg-blue-500"></div>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">UI Adjustments</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-xs font-medium text-purple-500">Design</span>
</div>
<p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-xs font-medium text-purple-500">Design</span>
</div>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
</div>
</div>
<div class="w-auto p-2">
<div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
</svg>
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Shuffle Improvements</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-xs font-medium text-green-500">Planning</span>
</div>
<img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
<p class="text-xs text-gray-300 mb-4">This is an example task that can be used within a Kanban system.</p>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
<div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center">
<h3 class="text-lg text-white font-semibold mr-2">In Review</h3>
<span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">10</span>
</div>
<div>
<button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
</svg>
</button>
<a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
<svg width="12" height="4" viewbox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="h-1 w-full mb-4 rounded-full bg-yellow-500"></div>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Implement Login</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-pink-400 rounded-full"></span>
<span class="text-xs font-medium text-pink-400">Development</span>
</div>
<p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/working-women-laptop.png" alt="">
<h4 class="text-white font-semibold leading-6 mb-1">Posts for Social Media</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-blue-500 rounded-full"></span>
<span class="text-xs font-medium text-blue-500">Design</span>
</div>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex flex-wrap -m-1">
<div class="w-auto p-1">
<div class="inline-flex w-10 h-8 items-center py-1 px-2 bg-gray-400 rounded-lg">
<svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66675 9.3333C6.884 9.55503 7.14331 9.73118 7.4295 9.85144C7.71568 9.9717 8.02299 10.0336 8.33341 10.0336C8.64384 10.0336 8.95114 9.9717 9.23733 9.85144C9.52352 9.73118 9.78283 9.55503 10.0001 9.3333L12.6667 6.66663C13.1088 6.22461 13.3571 5.62509 13.3571 4.99997C13.3571 4.37485 13.1088 3.77533 12.6667 3.3333C12.2247 2.89127 11.6252 2.64294 11.0001 2.64294C10.375 2.64294 9.77544 2.89127 9.33341 3.3333L9.00008 3.66663" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.33342 6.66665C9.11617 6.44492 8.85686 6.26876 8.57067 6.14851C8.28449 6.02825 7.97718 5.96631 7.66676 5.96631C7.35633 5.96631 7.04903 6.02825 6.76284 6.14851C6.47665 6.26876 6.21734 6.44492 6.00009 6.66665L3.33342 9.33332C2.89139 9.77534 2.64307 10.3749 2.64307 11C2.64307 11.6251 2.89139 12.2246 3.33342 12.6666C3.77545 13.1087 4.37497 13.357 5.00009 13.357C5.62521 13.357 6.22473 13.1087 6.66676 12.6666L7.00009 12.3333" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-1 text-xs text-white">2</span>
</div>
</div>
<div class="w-auto p-1">
<div class="inline-flex w-10 h-8 items-center py-1 px-2 bg-gray-400 rounded-lg">
<svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 13.3333L2.86667 10.7333C2.11763 9.62549 1.84666 8.31358 2.10415 7.04151C2.36163 5.76943 3.13004 4.62375 4.26651 3.81749C5.40298 3.01122 6.83017 2.59924 8.28273 2.65813C9.73528 2.71703 11.1143 3.24279 12.1635 4.13768C13.2127 5.03256 13.8606 6.23567 13.9867 7.52329C14.1128 8.81092 13.7086 10.0955 12.8492 11.1381C11.9899 12.1807 10.7338 12.9104 9.31453 13.1915C7.89529 13.4727 6.40947 13.2862 5.13333 12.6666L2 13.3333Z" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5.33325 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.6667 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-1 text-xs text-white">5</span>
</div>
</div>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-xs font-medium text-purple-500">Design</span>
</div>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
</div>
</div>
<div class="w-auto p-2">
<div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
<div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center">
<h3 class="text-lg text-white font-semibold mr-2">In progress</h3>
<span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">2</span>
</div>
<div>
<button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
</svg>
</button>
<a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
<svg width="12" height="4" viewbox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="h-1 w-full mb-4 rounded-full bg-blue-500"></div>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">UI Adjustments</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-xs font-medium text-purple-500">Design</span>
</div>
<p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-xs font-medium text-purple-500">Design</span>
</div>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
</div>
</div>
<div class="w-auto p-2">
<div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
</svg>
</div>
</div>
</div>
</div>
</a>
<a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
<h4 class="text-white font-semibold leading-6 mb-1">Shuffle Improvements</h4>
<div class="flex items-center mb-4">
<span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-xs font-medium text-green-500">Planning</span>
</div>
<img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
<p class="text-xs text-gray-300 mb-4">This is an example task that can be used within a Kanban system.</p>
<div class="pt-4 border-t border-gray-500">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<div class="flex items-center p-2 bg-gray-500 rounded-md">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
</div>
</div>
<div class="w-auto p-2">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
Component #2
<section class="py-3">
<div class="container px-4 mx-auto">
<div class="mb-6">
<div class="flex flex-wrap -mx-3 -mb-6">
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
<div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
<div class="max-w-xs mx-auto text-center">
<div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 16H1C0.734784 16 0.48043 16.1054 0.292893 16.2929C0.105357 16.4804 0 16.7348 0 17C0 17.2652 0.105357 17.5196 0.292893 17.7071C0.48043 17.8946 0.734784 18 1 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 20H1C0.734784 20 0.48043 20.1054 0.292893 20.2929C0.105357 20.4804 0 20.7348 0 21C0 21.2652 0.105357 21.5196 0.292893 21.7071C0.48043 21.8946 0.734784 22 1 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20ZM5 6C4.80222 6 4.60888 6.05865 4.44443 6.16853C4.27998 6.27841 4.15181 6.43459 4.07612 6.61732C4.00043 6.80004 3.98063 7.00111 4.01921 7.19509C4.0578 7.38907 4.15304 7.56725 4.29289 7.70711C4.43275 7.84696 4.61093 7.9422 4.80491 7.98079C4.99889 8.01937 5.19996 7.99957 5.38268 7.92388C5.56541 7.84819 5.72159 7.72002 5.83147 7.55557C5.94135 7.39112 6 7.19778 6 7C6 6.73478 5.89464 6.48043 5.70711 6.29289C5.51957 6.10536 5.26522 6 5 6ZM19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V11C0 11.7956 0.31607 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H19C19.7956 14 20.5587 13.6839 21.1213 13.1213C21.6839 12.5587 22 11.7956 22 11V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM11 4C10.4067 4 9.82664 4.17595 9.33329 4.50559C8.83994 4.83524 8.45542 5.30377 8.22836 5.85195C8.0013 6.40013 7.94189 7.00333 8.05764 7.58527C8.1734 8.16721 8.45912 8.70176 8.87868 9.12132C9.29824 9.54088 9.83279 9.8266 10.4147 9.94236C10.9967 10.0581 11.5999 9.9987 12.1481 9.77164C12.6962 9.54458 13.1648 9.16006 13.4944 8.66671C13.8241 8.17336 14 7.59334 14 7C14 6.20435 13.6839 5.44129 13.1213 4.87868C12.5587 4.31607 11.7956 4 11 4ZM11 8C10.8022 8 10.6089 7.94135 10.4444 7.83147C10.28 7.72159 10.1518 7.56541 10.0761 7.38268C10.0004 7.19996 9.98063 6.99889 10.0192 6.80491C10.0578 6.61093 10.153 6.43275 10.2929 6.29289C10.4327 6.15304 10.6109 6.0578 10.8049 6.01921C10.9989 5.98063 11.2 6.00043 11.3827 6.07612C11.5654 6.15181 11.7216 6.27998 11.8315 6.44443C11.9414 6.60888 12 6.80222 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89464 11.2652 8 11 8ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6Z" fill="#194BFB"></path>
</svg>
</div>
<span class="text-xs text-gray-300 font-semibold">Budget</span>
<h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">$28K</h4>
<div class="flex flex-wrap items-center justify-center -m-1">
<div class="w-auto p-1">
<span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
</div>
<div class="w-auto p-1">
<span class="text-xs text-gray-300 font-medium">Since last month</span>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
<div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
<div class="max-w-xs mx-auto text-center">
<div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="22" height="18" viewbox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="#194BFB"></path>
</svg>
</div>
<span class="text-xs text-gray-300 font-semibold">Total customers</span>
<h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">1.6K</h4>
<div class="flex flex-wrap items-center justify-center -m-1">
<div class="w-auto p-1">
<span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
</div>
<div class="w-auto p-1">
<span class="text-xs text-gray-300 font-medium">Since last month</span>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
<div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
<div class="max-w-xs mx-auto text-center">
<div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="16" height="20" viewbox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2H11.82C11.6137 1.41645 11.2319 0.910998 10.7271 0.552938C10.2222 0.194879 9.61894 0.00173951 9 0H7C6.38106 0.00173951 5.7778 0.194879 5.27293 0.552938C4.76807 0.910998 4.38631 1.41645 4.18 2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.316071 3.44129 0 4.20435 0 5V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2ZM6 3C6 2.73478 6.10536 2.48043 6.29289 2.29289C6.48043 2.10536 6.73478 2 7 2H9C9.26522 2 9.51957 2.10536 9.70711 2.29289C9.89464 2.48043 10 2.73478 10 3V4H6V3ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V5C2 4.73478 2.10536 4.48043 2.29289 4.29289C2.48043 4.10536 2.73478 4 3 4H4V5C4 5.26522 4.10536 5.51957 4.29289 5.70711C4.48043 5.89464 4.73478 6 5 6H11C11.2652 6 11.5196 5.89464 11.7071 5.70711C11.8946 5.51957 12 5.26522 12 5V4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V17Z" fill="#194BFB"></path>
</svg>
</div>
<span class="text-xs text-gray-300 font-semibold">Tasks Progress</span>
<h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">64.5%</h4>
<div class="flex flex-wrap items-center justify-center -m-1">
<div class="w-auto p-1">
<span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
</div>
<div class="w-auto p-1">
<span class="text-xs text-gray-300 font-medium">Since last month</span>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
<div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
<div class="max-w-xs mx-auto text-center">
<div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V19C0 19.7956 0.31607 20.5587 0.87868 21.1213C1.44129 21.6839 2.20435 22 3 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM7 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19V17.82C2.32067 17.9364 2.65886 17.9973 3 18H7V20ZM7 16H3C2.73478 16 2.48043 15.8946 2.29289 15.7071C2.10536 15.5196 2 15.2652 2 15V13.82C2.32067 13.9364 2.65886 13.9973 3 14H7V16ZM7 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H7V12ZM13 20H9V14H13V20ZM13 12H9V2H13V12ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H15V18H19C19.3411 17.9973 19.6793 17.9364 20 17.82V19ZM20 15C20 15.2652 19.8946 15.5196 19.7071 15.7071C19.5196 15.8946 19.2652 16 19 16H15V14H19C19.3411 13.9973 19.6793 13.9364 20 13.82V15ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H15V2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6ZM5 8C5.19778 8 5.39112 7.94135 5.55557 7.83147C5.72002 7.72159 5.84819 7.56541 5.92388 7.38268C5.99957 7.19996 6.01937 6.99889 5.98079 6.80491C5.9422 6.61093 5.84696 6.43275 5.70711 6.29289C5.56725 6.15304 5.38907 6.0578 5.19509 6.01921C5.00111 5.98063 4.80004 6.00043 4.61732 6.07612C4.43459 6.15181 4.27841 6.27998 4.16853 6.44443C4.05865 6.60888 4 6.80222 4 7C4 7.26522 4.10536 7.51957 4.29289 7.70711C4.48043 7.89464 4.73478 8 5 8Z" fill="#194BFB"></path>
</svg>
</div>
<span class="text-xs text-gray-300 font-semibold">Total profit</span>
<h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">$23K</h4>
<div class="flex flex-wrap items-center justify-center -m-1">
<div class="w-auto p-1">
<span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
</div>
<div class="w-auto p-1">
<span class="text-xs text-gray-300 font-medium">Since last month</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex flex-wrap -mx-3">
<div class="w-full lg:w-2/3 px-3 mb-6 lg:mb-0">
<div class="p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
<div class="w-auto px-4 mb-4">
<h4 class="text-gray-100 font-bold tracking-wide">Latest Sales</h4>
</div>
<div class="w-auto px-4 mb-4">
<div class="flex items-center">
<div class="mr-4">
<span class="inline-block w-2 h-2 mr-1 bg-blue-500 rounded-full"></span>
<span class="text-xs text-gray-300">This year</span>
</div>
<div class="mr-6">
<span class="inline-block w-2 h-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-xs text-gray-300">Last year</span>
</div>
<div class="relative inline-block bg-gray-600 rounded-xl">
<select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
<option value="">Last 7 days</option>
<option value="">Last Month</option>
</select>
<span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
<svg width="10" height="7" viewbox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="chart mt-8 mb-3" data-type="columns-thin" data-variant="two" style="min-height: 200px;"></div>
</div>
</div>
<div class="w-full lg:w-1/3 px-3">
<div class="p-6 bg-gray-500 rounded-xl">
<h4 class="text-gray-100 font-bold tracking-wide mb-8">Traffic by Device</h4>
<div class="chart mb-10" data-type="donut" style="min-height: 180px;"></div>
<div class="flex flex-wrap px-4 items-center justify-between">
<div class="text-center">
<span class="inline-block w-2 h-2 mb-2 bg-blue-500 rounded-full"></span>
<h6 class="text-xs text-gray-300 font-semibold">Desktop</h6>
<h5 class="text-2xl text-gray-100 font-semibold">65%</h5>
</div>
<div class="text-center">
<span class="inline-block w-2 h-2 mb-2 bg-purple-500 rounded-full"></span>
<h6 class="text-xs text-gray-300 font-semibold">Mobile</h6>
<h5 class="text-2xl text-gray-100 font-semibold">20%</h5>
</div>
<div class="text-center">
<span class="inline-block w-2 h-2 mb-2 bg-yellow-500 rounded-full"></span>
<h6 class="text-xs text-gray-300 font-semibold">Tablet</h6>
<h5 class="text-2xl text-gray-100 font-semibold">15%</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
<div class="h-full py-6 px-4 sm:px-6 bg-gray-500 rounded-xl">
<h4 class="text-lg text-gray-100 font-semibold mb-6">Latest Products</h4>
<a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
<div class="flex items-center pr-2">
<div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
<img src="trizzle-assets/logos/dropbox.svg" alt="">
</div>
<div>
<h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Dropbox</h5>
<p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
</div>
</div>
<svg width="4" height="18" viewbox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
</svg>
</a>
<a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
<div class="flex items-center pr-2">
<div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
<img src="trizzle-assets/logos/medium.svg" alt="">
</div>
<div>
<h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Medium</h5>
<p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
</div>
</div>
<svg width="4" height="18" viewbox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
</svg>
</a>
<a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
<div class="flex items-center pr-2">
<div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
<img src="trizzle-assets/logos/slack.svg" alt="">
</div>
<div>
<h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Slack</h5>
<p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
</div>
</div>
<svg width="4" height="18" viewbox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
</svg>
</a>
<a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
<div class="flex items-center pr-2">
<div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
<img src="trizzle-assets/logos/github.svg" alt="">
</div>
<div>
<h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Github</h5>
<p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
</div>
</div>
<svg width="4" height="18" viewbox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
</svg>
</a>
<a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
<div class="flex items-center pr-2">
<div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
<img src="trizzle-assets/logos/discord.svg" alt="">
</div>
<div>
<h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Discord</h5>
<p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
</div>
</div>
<svg width="4" height="18" viewbox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
</svg>
</a>
<a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
<div class="flex items-center pr-2">
<div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
<img src="trizzle-assets/logos/spotify.svg" alt="">
</div>
<div>
<h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Spotify</h5>
<p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
</div>
</div>
<svg width="4" height="18" viewbox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
</svg>
</a>
</div>
</div>
<div class="w-full lg:w-2/3 px-3">
<div class="h-full p-6 bg-gray-500 rounded-xl">
<h4 class="text-lg text-gray-100 font-semibold mb-6">Latest Products</h4>
<div class="w-full mt-6 pb-4 overflow-x-auto">
<table class="w-full min-w-max">
<thead>
<tr class="text-left">
<th class="p-0">
<div class="py-3 px-6 rounded-l-xl bg-gray-600">
<span class="text-xs text-gray-300 font-semibold">ORDER REF</span>
</div>
</th>
<th class="p-0">
<div class="py-3 px-6 bg-gray-600">
<span class="text-xs text-gray-300 font-semibold">CUSTOMER</span>
</div>
</th>
<th class="p-0">
<div class="py-3 px-6 bg-gray-600">
<button class="inline-flex items-center text-xs text-gray-300 font-semibold">
<span class="mr-2">DATE</span>
<svg width="10" height="14" viewbox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.8598 8.52669L4.9998 11.3934L2.1398 8.52669C2.01426 8.40115 1.844 8.33063 1.66646 8.33063C1.48893 8.33063 1.31867 8.40115 1.19313 8.52669C1.0676 8.65222 0.99707 8.82249 0.99707 9.00002C0.99707 9.17756 1.0676 9.34782 1.19313 9.47335L4.52646 12.8067C4.58844 12.8692 4.66217 12.9188 4.74341 12.9526C4.82465 12.9865 4.91179 13.0039 4.9998 13.0039C5.08781 13.0039 5.17494 12.9865 5.25618 12.9526C5.33742 12.9188 5.41116 12.8692 5.47313 12.8067L8.80646 9.47335C8.86862 9.41119 8.91793 9.3374 8.95157 9.25619C8.98521 9.17497 9.00252 9.08793 9.00252 9.00002C9.00252 8.91211 8.98521 8.82507 8.95157 8.74385C8.91793 8.66264 8.86862 8.58885 8.80646 8.52669C8.7443 8.46453 8.67051 8.41522 8.5893 8.38158C8.50808 8.34794 8.42104 8.33063 8.33313 8.33063C8.24522 8.33063 8.15818 8.34794 8.07696 8.38158C7.99575 8.41522 7.92196 8.46453 7.8598 8.52669ZM2.1398 5.47335L4.9998 2.60669L7.8598 5.47335C7.92177 5.53584 7.99551 5.58544 8.07675 5.61928C8.15799 5.65313 8.24512 5.67055 8.33313 5.67055C8.42114 5.67055 8.50828 5.65313 8.58952 5.61928C8.67075 5.58544 8.74449 5.53584 8.80646 5.47335C8.86895 5.41138 8.91855 5.33764 8.95239 5.2564C8.98624 5.17517 9.00366 5.08803 9.00366 5.00002C9.00366 4.91201 8.98624 4.82488 8.95239 4.74364C8.91855 4.6624 8.86895 4.58866 8.80646 4.52669L5.47313 1.19335C5.41116 1.13087 5.33742 1.08127 5.25618 1.04743C5.17494 1.01358 5.08781 0.996155 4.9998 0.996155C4.91179 0.996155 4.82465 1.01358 4.74341 1.04743C4.66217 1.08127 4.58844 1.13087 4.52646 1.19335L1.19313 4.52669C1.0676 4.65222 0.99707 4.82249 0.99707 5.00002C0.99707 5.17756 1.0676 5.34782 1.19313 5.47335C1.31867 5.59889 1.48893 5.66941 1.66646 5.66941C1.844 5.66941 2.01426 5.59889 2.1398 5.47335Z" fill="currentColor"></path>
</svg>
</button>
</div>
</th>
<th class="p-0">
<div class="py-3 px-5 rounded-r-xl bg-gray-600">
<span class="text-xs text-gray-300 font-semibold">STATUS</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<div class="h-16 p-6">
<h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<span class="text-sm font-medium text-gray-100">John Doe</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Pending</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6 rounded-l-xl bg-gray-600">
<h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-600">
<div class="flex h-full items-center">
<img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<span class="text-sm font-medium text-gray-100">John Doe</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-600">
<h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
</div>
</td>
<td class="p-0">
<div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
<span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Delivered</span>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6">
<h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<span class="text-sm font-medium text-gray-100">John Doe</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Pending</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6 rounded-l-xl bg-gray-600">
<h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-600">
<div class="flex h-full items-center">
<img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<span class="text-sm font-medium text-gray-100">John Doe</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-600">
<h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
</div>
</td>
<td class="p-0">
<div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
<span class="inline-block w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Refunded</span>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6">
<h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<span class="text-sm font-medium text-gray-100">John Doe</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Pending</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6 rounded-l-xl bg-gray-600">
<h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-600">
<div class="flex h-full items-center">
<img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<span class="text-sm font-medium text-gray-100">John Doe</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-600">
<h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
</div>
</td>
<td class="p-0">
<div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
<span class="inline-block w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Refunded</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
Component #3
<section class="py-3">
<div class="container px-4 mx-auto">
<div class="mb-6">
<div class="flex flex-wrap items-center -mx-3 -mb-6">
<div class="w-full sm:w-1/2 xl:w-1/4 px-3 mb-6">
<div class="max-w-xs md:max-w-none mx-auto p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap items-center -m-2">
<div class="w-auto p-2">
<div class="flex flex-shrink-0 w-12 h-12 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 16H1C0.734784 16 0.48043 16.1054 0.292893 16.2929C0.105357 16.4804 0 16.7348 0 17C0 17.2652 0.105357 17.5196 0.292893 17.7071C0.48043 17.8946 0.734784 18 1 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 20H1C0.734784 20 0.48043 20.1054 0.292893 20.2929C0.105357 20.4804 0 20.7348 0 21C0 21.2652 0.105357 21.5196 0.292893 21.7071C0.48043 21.8946 0.734784 22 1 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20ZM5 6C4.80222 6 4.60888 6.05865 4.44443 6.16853C4.27998 6.27841 4.15181 6.43459 4.07612 6.61732C4.00043 6.80004 3.98063 7.00111 4.01921 7.19509C4.0578 7.38907 4.15304 7.56725 4.29289 7.70711C4.43275 7.84696 4.61093 7.9422 4.80491 7.98079C4.99889 8.01937 5.19996 7.99957 5.38268 7.92388C5.56541 7.84819 5.72159 7.72002 5.83147 7.55557C5.94135 7.39112 6 7.19778 6 7C6 6.73478 5.89464 6.48043 5.70711 6.29289C5.51957 6.10536 5.26522 6 5 6ZM19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V11C0 11.7956 0.31607 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H19C19.7956 14 20.5587 13.6839 21.1213 13.1213C21.6839 12.5587 22 11.7956 22 11V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM11 4C10.4067 4 9.82664 4.17595 9.33329 4.50559C8.83994 4.83524 8.45542 5.30377 8.22836 5.85195C8.0013 6.40013 7.94189 7.00333 8.05764 7.58527C8.1734 8.16721 8.45912 8.70176 8.87868 9.12132C9.29824 9.54088 9.83279 9.8266 10.4147 9.94236C10.9967 10.0581 11.5999 9.9987 12.1481 9.77164C12.6962 9.54458 13.1648 9.16006 13.4944 8.66671C13.8241 8.17336 14 7.59334 14 7C14 6.20435 13.6839 5.44129 13.1213 4.87868C12.5587 4.31607 11.7956 4 11 4ZM11 8C10.8022 8 10.6089 7.94135 10.4444 7.83147C10.28 7.72159 10.1518 7.56541 10.0761 7.38268C10.0004 7.19996 9.98063 6.99889 10.0192 6.80491C10.0578 6.61093 10.153 6.43275 10.2929 6.29289C10.4327 6.15304 10.6109 6.0578 10.8049 6.01921C10.9989 5.98063 11.2 6.00043 11.3827 6.07612C11.5654 6.15181 11.7216 6.27998 11.8315 6.44443C11.9414 6.60888 12 6.80222 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89464 11.2652 8 11 8ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<h5 class="text-xs text-gray-300 leading-5 font-semibold">Value</h5>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<span class="text-2xl leading-none text-gray-100 font-semibold">3.500</span>
</div>
<div class="w-auto p-1">
<span class="relative bottom-0.5 inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 xl:w-1/4 px-3 mb-6">
<div class="max-w-xs md:max-w-none mx-auto p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap items-center -m-2">
<div class="w-auto p-2">
<div class="flex flex-shrink-0 w-12 h-12 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="22" height="18" viewbox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<h5 class="text-xs text-gray-300 leading-5 font-semibold">Clients</h5>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<span class="text-2xl leading-none text-gray-100 font-semibold">245</span>
</div>
<div class="w-auto p-1">
<span class="relative bottom-0.5 inline-block py-1 px-2 text-xs text-red-500 font-medium bg-red-900 rounded-full">-6,25%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 xl:w-1/4 px-3 mb-6">
<div class="max-w-xs md:max-w-none mx-auto p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap items-center -m-2">
<div class="w-auto p-2">
<div class="flex flex-shrink-0 w-12 h-12 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 5.50001H16.68L15.43 2.38001C15.2068 1.82527 14.8228 1.3499 14.3275 1.01492C13.8321 0.679935 13.248 0.500629 12.65 0.500012H6.65C5.95529 0.498024 5.28142 0.737203 4.74342 1.17673C4.20541 1.61625 3.83662 2.22886 3.7 2.91001L3.18 5.50001H3C2.20435 5.50001 1.44129 5.81608 0.87868 6.37869C0.316071 6.9413 0 7.70436 0 8.50001V11.5C0 11.7652 0.105357 12.0196 0.292893 12.2071C0.48043 12.3947 0.734784 12.5 1 12.5H2C2 13.2957 2.31607 14.0587 2.87868 14.6213C3.44129 15.1839 4.20435 15.5 5 15.5C5.79565 15.5 6.55871 15.1839 7.12132 14.6213C7.68393 14.0587 8 13.2957 8 12.5H12C12 13.2957 12.3161 14.0587 12.8787 14.6213C13.4413 15.1839 14.2044 15.5 15 15.5C15.7956 15.5 16.5587 15.1839 17.1213 14.6213C17.6839 14.0587 18 13.2957 18 12.5H19C19.2652 12.5 19.5196 12.3947 19.7071 12.2071C19.8946 12.0196 20 11.7652 20 11.5V8.50001C20 7.70436 19.6839 6.9413 19.1213 6.37869C18.5587 5.81608 17.7956 5.50001 17 5.50001ZM11 2.50001H12.65C12.8486 2.50181 13.0421 2.56269 13.206 2.67488C13.3698 2.78708 13.4965 2.94552 13.57 3.13001L14.52 5.50001H11V2.50001ZM5.66 3.30001C5.70675 3.07074 5.83242 2.86511 6.01514 2.71894C6.19786 2.57277 6.42605 2.49529 6.66 2.50001H9V5.50001H5.22L5.66 3.30001ZM5 13.5C4.80222 13.5 4.60888 13.4414 4.44443 13.3315C4.27998 13.2216 4.15181 13.0654 4.07612 12.8827C4.00043 12.7 3.98063 12.4989 4.01921 12.3049C4.0578 12.1109 4.15304 11.9328 4.29289 11.7929C4.43275 11.6531 4.61093 11.5578 4.80491 11.5192C4.99889 11.4806 5.19996 11.5004 5.38268 11.5761C5.56541 11.6518 5.72159 11.78 5.83147 11.9444C5.94135 12.1089 6 12.3022 6 12.5C6 12.7652 5.89464 13.0196 5.70711 13.2071C5.51957 13.3947 5.26522 13.5 5 13.5ZM15 13.5C14.8022 13.5 14.6089 13.4414 14.4444 13.3315C14.28 13.2216 14.1518 13.0654 14.0761 12.8827C14.0004 12.7 13.9806 12.4989 14.0192 12.3049C14.0578 12.1109 14.153 11.9328 14.2929 11.7929C14.4327 11.6531 14.6109 11.5578 14.8049 11.5192C14.9989 11.4806 15.2 11.5004 15.3827 11.5761C15.5654 11.6518 15.7216 11.78 15.8315 11.9444C15.9414 12.1089 16 12.3022 16 12.5C16 12.7652 15.8946 13.0196 15.7071 13.2071C15.5196 13.3947 15.2652 13.5 15 13.5ZM18 10.5H17.22C16.9388 10.1907 16.5961 9.94348 16.2138 9.77434C15.8315 9.6052 15.418 9.51783 15 9.51783C14.582 9.51783 14.1685 9.6052 13.7862 9.77434C13.4039 9.94348 13.0612 10.1907 12.78 10.5H7.22C6.93882 10.1907 6.59609 9.94348 6.21378 9.77434C5.83148 9.6052 5.41805 9.51783 5 9.51783C4.58195 9.51783 4.16852 9.6052 3.78622 9.77434C3.40391 9.94348 3.06118 10.1907 2.78 10.5H2V8.50001C2 8.2348 2.10536 7.98044 2.29289 7.79291C2.48043 7.60537 2.73478 7.50001 3 7.50001H17C17.2652 7.50001 17.5196 7.60537 17.7071 7.79291C17.8946 7.98044 18 8.2348 18 8.50001V10.5Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<h5 class="text-xs text-gray-300 leading-5 font-semibold">Deliveries</h5>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<span class="text-2xl leading-none text-gray-100 font-semibold">16.5K</span>
</div>
<div class="w-auto p-1">
<span class="relative bottom-0.5 inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 xl:w-1/4 px-3 mb-6">
<div class="max-w-xs md:max-w-none mx-auto p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap items-center -m-2">
<div class="w-auto p-2">
<div class="flex flex-shrink-0 w-12 h-12 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 7C9.40666 7 8.82664 7.17595 8.33329 7.50559C7.83994 7.83524 7.45542 8.30377 7.22836 8.85195C7.0013 9.40013 6.94189 10.0033 7.05764 10.5853C7.1734 11.1672 7.45912 11.7018 7.87868 12.1213C8.29824 12.5409 8.83279 12.8266 9.41473 12.9424C9.99667 13.0581 10.5999 12.9987 11.1481 12.7716C11.6962 12.5446 12.1648 12.1601 12.4944 11.6667C12.8241 11.1734 13 10.5933 13 10C13 9.20435 12.6839 8.44129 12.1213 7.87868C11.5587 7.31607 10.7956 7 10 7ZM10 11C9.80222 11 9.60888 10.9414 9.44443 10.8315C9.27998 10.7216 9.15181 10.5654 9.07612 10.3827C9.00043 10.2 8.98063 9.99889 9.01921 9.80491C9.0578 9.61093 9.15304 9.43275 9.29289 9.29289C9.43275 9.15304 9.61093 9.0578 9.80491 9.01921C9.99889 8.98063 10.2 9.00043 10.3827 9.07612C10.5654 9.15181 10.7216 9.27998 10.8315 9.44443C10.9414 9.60888 11 9.80222 11 10C11 10.2652 10.8946 10.5196 10.7071 10.7071C10.5196 10.8946 10.2652 11 10 11ZM19 9H17.93C17.7068 7.23998 16.9049 5.60408 15.6504 4.34959C14.3959 3.0951 12.76 2.29319 11 2.07V1C11 0.734784 10.8946 0.48043 10.7071 0.292893C10.5196 0.105357 10.2652 0 10 0C9.73478 0 9.48043 0.105357 9.29289 0.292893C9.10536 0.48043 9 0.734784 9 1V2.07C7.23998 2.29319 5.60408 3.0951 4.34959 4.34959C3.0951 5.60408 2.29319 7.23998 2.07 9H1C0.734784 9 0.48043 9.10536 0.292893 9.29289C0.105357 9.48043 0 9.73478 0 10C0 10.2652 0.105357 10.5196 0.292893 10.7071C0.48043 10.8946 0.734784 11 1 11H2.07C2.29319 12.76 3.0951 14.3959 4.34959 15.6504C5.60408 16.9049 7.23998 17.7068 9 17.93V19C9 19.2652 9.10536 19.5196 9.29289 19.7071C9.48043 19.8946 9.73478 20 10 20C10.2652 20 10.5196 19.8946 10.7071 19.7071C10.8946 19.5196 11 19.2652 11 19V17.93C12.76 17.7068 14.3959 16.9049 15.6504 15.6504C16.9049 14.3959 17.7068 12.76 17.93 11H19C19.2652 11 19.5196 10.8946 19.7071 10.7071C19.8946 10.5196 20 10.2652 20 10C20 9.73478 19.8946 9.48043 19.7071 9.29289C19.5196 9.10536 19.2652 9 19 9ZM10 16C8.81331 16 7.65327 15.6481 6.66658 14.9888C5.67988 14.3295 4.91085 13.3925 4.45672 12.2961C4.0026 11.1997 3.88378 9.99334 4.11529 8.82946C4.3468 7.66557 4.91824 6.59647 5.75736 5.75736C6.59647 4.91824 7.66557 4.3468 8.82946 4.11529C9.99334 3.88378 11.1997 4.0026 12.2961 4.45672C13.3925 4.91085 14.3295 5.67988 14.9888 6.66658C15.6481 7.65327 16 8.81331 16 10C16 11.5913 15.3679 13.1174 14.2426 14.2426C13.1174 15.3679 11.5913 16 10 16Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<h5 class="text-xs text-gray-300 leading-5 font-semibold">Target ratio</h5>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<span class="text-2xl leading-none text-gray-100 font-semibold">88%</span>
</div>
<div class="w-auto p-1">
<span class="relative bottom-0.5 inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex flex-wrap -mx-3 -mb-6">
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
<div class="h-full max-w-sm mx-auto p-6 bg-gray-500 rounded-xl">
<div class="flex flex-shrink-0 w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 3.50002H10.72L10.4 2.50002C10.1926 1.91325 9.80775 1.40553 9.2989 1.04718C8.79005 0.688841 8.18236 0.497623 7.56 0.500022H3C2.20435 0.500022 1.44129 0.816093 0.87868 1.3787C0.316071 1.94131 0 2.70437 0 3.50002V16.5C0 17.2957 0.316071 18.0587 0.87868 18.6213C1.44129 19.184 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.184 19.1213 18.6213C19.6839 18.0587 20 17.2957 20 16.5V6.50002C20 5.70437 19.6839 4.94131 19.1213 4.3787C18.5587 3.81609 17.7956 3.50002 17 3.50002ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3947 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3947 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V3.50002C2 3.23481 2.10536 2.98045 2.29289 2.79292C2.48043 2.60538 2.73478 2.50002 3 2.50002H7.56C7.76964 2.49948 7.97416 2.56484 8.14463 2.68686C8.3151 2.80889 8.44291 2.9814 8.51 3.18002L9.05 4.82002C9.11709 5.01864 9.2449 5.19116 9.41537 5.31318C9.58584 5.4352 9.79036 5.50056 10 5.50002H17C17.2652 5.50002 17.5196 5.60538 17.7071 5.79292C17.8946 5.98045 18 6.23481 18 6.50002V16.5Z" fill="#194BFB"></path>
</svg>
</div>
<h5 class="text-lg text-gray-100 font-semibold mb-8">Drive Storage</h5>
<div class="flex mb-2 items-center justify-between">
<span class="text-xs text-blue-500 font-semibold">45 GB</span>
<span class="text-xs text-gray-300 font-semibold">100 GB</span>
</div>
<div class="relative py-1 bg-gray-700 rounded-full">
<div class="absolute top-0 left-0 h-full w-2/3 bg-blue-500 rounded-full"></div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
<div class="relative h-full max-w-sm mx-auto p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap items-center justify-between mb-4 -m-2">
<div class="w-auto p-2">
<div class="flex flex-shrink-0 w-12 h-12 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H8V5C8 5.79565 8.31607 6.55871 8.87868 7.12132C9.44129 7.68393 10.2044 8 11 8H14V9C14 9.26522 14.1054 9.51957 14.2929 9.70711C14.4804 9.89464 14.7348 10 15 10C15.2652 10 15.5196 9.89464 15.7071 9.70711C15.8946 9.51957 16 9.26522 16 9V7C16 7 16 7 16 6.94C15.9896 6.84813 15.9695 6.75763 15.94 6.67V6.58C15.8919 6.47718 15.8278 6.38267 15.75 6.3L9.75 0.3C9.66734 0.222216 9.57282 0.158081 9.47 0.11C9.44015 0.10576 9.40985 0.10576 9.38 0.11C9.27841 0.0517412 9.16622 0.0143442 9.05 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H10C10.2652 20 10.5196 19.8946 10.7071 19.7071C10.8946 19.5196 11 19.2652 11 19C11 18.7348 10.8946 18.4804 10.7071 18.2929C10.5196 18.1054 10.2652 18 10 18ZM10 3.41L12.59 6H11C10.7348 6 10.4804 5.89464 10.2929 5.70711C10.1054 5.51957 10 5.26522 10 5V3.41ZM5 6C4.73478 6 4.48043 6.10536 4.29289 6.29289C4.10536 6.48043 4 6.73478 4 7C4 7.26522 4.10536 7.51957 4.29289 7.70711C4.48043 7.89464 4.73478 8 5 8H6C6.26522 8 6.51957 7.89464 6.70711 7.70711C6.89464 7.51957 7 7.26522 7 7C7 6.73478 6.89464 6.48043 6.70711 6.29289C6.51957 6.10536 6.26522 6 6 6H5ZM19.71 18.29L18.54 17.13C18.914 16.4773 19.0636 15.7199 18.9661 14.974C18.8686 14.2281 18.5292 13.5347 18 13C17.513 12.4957 16.8854 12.1497 16.199 12.0071C15.5126 11.8646 14.7992 11.9321 14.1517 12.2008C13.5041 12.4695 12.9526 12.927 12.5688 13.5137C12.185 14.1004 11.9868 14.7891 12 15.49C11.9966 16.0932 12.1509 16.6868 12.4476 17.2119C12.7444 17.7371 13.1733 18.1755 13.6917 18.4838C14.2102 18.7921 14.8003 18.9594 15.4034 18.9693C16.0065 18.9791 16.6017 18.8311 17.13 18.54L18.29 19.71C18.383 19.8037 18.4936 19.8781 18.6154 19.9289C18.7373 19.9797 18.868 20.0058 19 20.0058C19.132 20.0058 19.2627 19.9797 19.3846 19.9289C19.5064 19.8781 19.617 19.8037 19.71 19.71C19.8037 19.617 19.8781 19.5064 19.9289 19.3846C19.9797 19.2627 20.0058 19.132 20.0058 19C20.0058 18.868 19.9797 18.7373 19.9289 18.6154C19.8781 18.4936 19.8037 18.383 19.71 18.29ZM16.54 16.54C16.2544 16.8086 15.8771 16.9581 15.485 16.9581C15.0929 16.9581 14.7156 16.8086 14.43 16.54C14.1547 16.2598 14.0003 15.8828 14 15.49C13.9979 15.2928 14.0359 15.0971 14.1115 14.915C14.1871 14.7328 14.2989 14.5678 14.44 14.43C14.7066 14.1648 15.0641 14.0111 15.44 14C15.6422 13.9876 15.8447 14.0171 16.035 14.0866C16.2252 14.1562 16.399 14.2643 16.5455 14.4042C16.692 14.5441 16.808 14.7128 16.8862 14.8996C16.9644 15.0865 17.0031 15.2875 17 15.49C16.9917 15.8871 16.8263 16.2647 16.54 16.54ZM11 10H5C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11C4 11.2652 4.10536 11.5196 4.29289 11.7071C4.48043 11.8946 4.73478 12 5 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11C12 10.7348 11.8946 10.4804 11.7071 10.2929C11.5196 10.1054 11.2652 10 11 10ZM9 16C9.26522 16 9.51957 15.8946 9.70711 15.7071C9.89464 15.5196 10 15.2652 10 15C10 14.7348 9.89464 14.4804 9.70711 14.2929C9.51957 14.1054 9.26522 14 9 14H5C4.73478 14 4.48043 14.1054 4.29289 14.2929C4.10536 14.4804 4 14.7348 4 15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16H9Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<div class="flex">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
</div>
</div>
</div>
<h5 class="text-lg text-gray-100 font-semibold mb-12">Research</h5>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-300 font-semibold">10 Files</span>
<span class="text-sm text-gray-300 font-semibold">5 GB</span>
</div>
</div>
</div>
<div class="w-full lg:w-2/4 px-3 mb-6">
<div class="relative h-full max-w-sm md:max-w-none mx-auto p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap items-center justify-between -mx-2">
<div class="w-full md:w-1/2 px-2 mb-12 md:mb-0">
<div class="max-w-xxs pr-12">
<div class="flex flex-shrink-0 w-12 h-12 mb-9 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 12.86V12.81C19.9879 12.6169 19.9544 12.4257 19.9 12.24L18.26 2.51003C18.1428 1.80198 17.7757 1.15939 17.2253 0.698869C16.6749 0.238344 15.9776 -0.00960096 15.26 2.60161e-05H4.69C3.98097 0.00232221 3.29566 0.255676 2.75565 0.715148C2.21563 1.17462 1.85581 1.81051 1.74 2.51003L0.12 12.22C0.0656405 12.4057 0.0321011 12.5969 0.02 12.79V12.84C-1.86265e-08 12.91 0 13 0 13V17C0 17.7957 0.316071 18.5587 0.87868 19.1213C1.44129 19.684 2.20435 20 3 20H17C17.7956 20 18.5587 19.684 19.1213 19.1213C19.6839 18.5587 20 17.7957 20 17V13C20 13 20 12.91 20 12.86ZM3.71 2.83003C3.75048 2.59523 3.87346 2.38261 4.05679 2.23044C4.24013 2.07827 4.47177 1.99656 4.71 2.00003H15.31C15.5482 1.99656 15.7799 2.07827 15.9632 2.23044C16.1465 2.38261 16.2695 2.59523 16.31 2.83003L17.51 10.05C17.342 10.0168 17.1712 10.0001 17 10H3C2.83546 10.0013 2.67141 10.0181 2.51 10.05L3.71 2.83003ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8947 17.2652 18 17 18H3C2.73478 18 2.48043 17.8947 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V13.08L2.08 12.62C2.15502 12.4374 2.28242 12.2811 2.44614 12.1707C2.60986 12.0604 2.80257 12.001 3 12H17C17.1974 12.001 17.3901 12.0604 17.5539 12.1707C17.7176 12.2811 17.845 12.4374 17.92 12.62L18 13.08V17ZM15 14C14.8022 14 14.6089 14.0587 14.4444 14.1686C14.28 14.2784 14.1518 14.4346 14.0761 14.6173C14.0004 14.8001 13.9806 15.0011 14.0192 15.1951C14.0578 15.3891 14.153 15.5673 14.2929 15.7071C14.4327 15.847 14.6109 15.9422 14.8049 15.9808C14.9989 16.0194 15.2 15.9996 15.3827 15.9239C15.5654 15.8482 15.7216 15.72 15.8315 15.5556C15.9414 15.3911 16 15.1978 16 15C16 14.7348 15.8946 14.4805 15.7071 14.2929C15.5196 14.1054 15.2652 14 15 14Z" fill="#194BFB"></path>
</svg>
</div>
<h5 class="text-lg text-gray-100 font-semibold mb-1">Used percentage</h5>
<p class="text-sm text-gray-300 font-semibold">Check your storage on your dashboard</p>
</div>
</div>
<div class="w-full md:w-1/2 px-2">
<div class="chart px-2" data-type="radial-bar-part" style="min-height: 120px;"></div>
<div class="flex items-end justify-center -mt-12">
<span class="text-3xl leading-none text-gray-200 font-semibold">64</span>
<span class="text-2xl leading-none text-gray-400 font-semibold">%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 pt-6 pb-8 bg-gray-500 rounded-xl">
<div class="flex flex-wrap -mx-3 -mb-4 justify-between items-center">
<div class="w-auto px-3 mb-4">
<h4 class="text-gray-100 font-bold tracking-wide">Work Performance</h4>
</div>
<div class="w-auto px-3 mb-4">
<div class="relative inline-block bg-gray-600 rounded-xl">
<select class="relative py-2 pl-4 pr-8 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
<option value="">This Month</option>
<option value="">Last Week</option>
</select>
<span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
<svg width="10" height="7" viewbox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="w-full mt-6 pb-4 overflow-x-auto">
<table class="w-full min-w-max">
<thead>
<tr class="text-left">
<th class="p-0">
<div class="py-3 px-6 rounded-l-xl bg-gray-700">
<span class="text-xs text-gray-300 font-semibold">TASK</span>
</div>
</th>
<th class="p-0">
<div class="py-3 px-6 bg-gray-700">
<span class="text-xs text-gray-300 font-semibold">STATUS</span>
</div>
</th>
<th class="p-0">
<div class="py-3 px-6 bg-gray-700">
<span class="text-xs text-gray-300 font-semibold">TEAM</span>
</div>
</th>
<th class="p-0">
<div class="py-3 px-5 rounded-r-xl bg-gray-700">
<span class="text-xs text-gray-300 font-semibold">ESTIMATED DATE</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<div class="h-16 p-6">
<h5 class="text-sm font-medium text-gray-100">Onboarding Process</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Done</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6 rounded-l-xl bg-gray-700">
<h5 class="text-sm font-medium text-gray-100">SEO Integrations</h5>
</div>
</td>
<td class="p-0">
<div class="flex h-16 p-6 items-center bg-gray-700">
<span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Done</span>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-700">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 rounded-r-xl bg-gray-700">
<h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6">
<h5 class="text-sm font-medium text-gray-100">Hosting Configuration</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<span class="inline-block w-2 h-2 mr-1 bg-blue-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">In progress</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6 rounded-l-xl bg-gray-700">
<h5 class="text-sm font-medium text-gray-100">CMS Handoff</h5>
</div>
</td>
<td class="p-0">
<div class="flex h-16 p-6 items-center bg-gray-700">
<span class="inline-block w-2 h-2 mr-1 bg-purple-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Backlog</span>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-700">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 rounded-r-xl bg-gray-700">
<h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6">
<h5 class="text-sm font-medium text-gray-100">Content Review</h5>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Done</span>
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6">
<span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="h-16 p-6 rounded-l-xl bg-gray-700">
<h5 class="text-sm font-medium text-gray-100">Onboarding Process</h5>
</div>
</td>
<td class="p-0">
<div class="flex h-16 p-6 items-center bg-gray-700">
<span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-100">Done</span>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 bg-gray-700">
<div class="flex h-full items-center">
<img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
<img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
</div>
</div>
</td>
<td class="p-0">
<div class="h-16 p-6 rounded-r-xl bg-gray-700">
<h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Component #4
<section class="py-3">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-3">
<div class="w-full lg:w-3/5 px-3 mb-6 lg:mb-0">
<div class="mb-6">
<div class="flex flex-wrap justify-center -mx-3 -mb-6">
<div class="w-full md:w-1/3 px-3 mb-6">
<div class="p-4 bg-gray-500 rounded-xl">
<div class="max-w-xxs px-6 md:px-0 md:max-w-none mx-auto">
<div class="flex flex-wrap items-center mb-6 -m-2">
<div class="w-auto p-2 self-start">
<div class="flex w-8 h-8 items-center justify-center bg-gray-600 rounded-xl">
<svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.3333 5.99996H9.99996C10.1768 5.99996 10.3463 5.92972 10.4714 5.8047C10.5964 5.67967 10.6666 5.5101 10.6666 5.33329C10.6666 5.15648 10.5964 4.98691 10.4714 4.86189C10.3463 4.73686 10.1768 4.66663 9.99996 4.66663H8.66663V3.99996C8.66663 3.82315 8.59639 3.65358 8.47137 3.52855C8.34634 3.40353 8.17677 3.33329 7.99996 3.33329C7.82315 3.33329 7.65358 3.40353 7.52856 3.52855C7.40353 3.65358 7.3333 3.82315 7.3333 3.99996V4.66663C6.80286 4.66663 6.29416 4.87734 5.91908 5.25241C5.54401 5.62748 5.3333 6.13619 5.3333 6.66663C5.3333 7.19706 5.54401 7.70577 5.91908 8.08084C6.29416 8.45591 6.80286 8.66663 7.3333 8.66663H8.66663C8.84344 8.66663 9.01301 8.73686 9.13803 8.86189C9.26306 8.98691 9.3333 9.15648 9.3333 9.33329C9.3333 9.5101 9.26306 9.67967 9.13803 9.8047C9.01301 9.92972 8.84344 9.99996 8.66663 9.99996H5.99996C5.82315 9.99996 5.65358 10.0702 5.52856 10.1952C5.40353 10.3202 5.3333 10.4898 5.3333 10.6666C5.3333 10.8434 5.40353 11.013 5.52856 11.138C5.65358 11.2631 5.82315 11.3333 5.99996 11.3333H7.3333V12C7.3333 12.1768 7.40353 12.3463 7.52856 12.4714C7.65358 12.5964 7.82315 12.6666 7.99996 12.6666C8.17677 12.6666 8.34634 12.5964 8.47137 12.4714C8.59639 12.3463 8.66663 12.1768 8.66663 12V11.3333C9.19706 11.3333 9.70577 11.1226 10.0808 10.7475C10.4559 10.3724 10.6666 9.86372 10.6666 9.33329C10.6666 8.80286 10.4559 8.29415 10.0808 7.91908C9.70577 7.54401 9.19706 7.33329 8.66663 7.33329H7.3333C7.15649 7.33329 6.98692 7.26305 6.86189 7.13803C6.73687 7.01301 6.66663 6.84344 6.66663 6.66663C6.66663 6.48981 6.73687 6.32025 6.86189 6.19522C6.98692 6.0702 7.15649 5.99996 7.3333 5.99996ZM7.99996 0.666626C6.54957 0.666626 5.13174 1.09672 3.92578 1.90252C2.71982 2.70831 1.77989 3.85362 1.22485 5.19361C0.669803 6.53361 0.524579 8.00809 0.807537 9.43062C1.0905 10.8531 1.78893 12.1598 2.81451 13.1854C3.8401 14.211 5.14677 14.9094 6.5693 15.1924C7.99183 15.4753 9.46632 15.3301 10.8063 14.7751C12.1463 14.22 13.2916 13.2801 14.0974 12.0741C14.9032 10.8682 15.3333 9.45036 15.3333 7.99996C15.3333 6.05504 14.5607 4.18978 13.1854 2.81451C11.8101 1.43924 9.94488 0.666626 7.99996 0.666626ZM7.99996 14C6.81327 14 5.65324 13.6481 4.66654 12.9888C3.67985 12.3295 2.91081 11.3924 2.45669 10.2961C2.00256 9.1997 1.88374 7.9933 2.11525 6.82942C2.34676 5.66553 2.91821 4.59643 3.75732 3.75732C4.59644 2.9182 5.66553 2.34676 6.82942 2.11525C7.99331 1.88374 9.19971 2.00256 10.2961 2.45668C11.3924 2.91081 12.3295 3.67984 12.9888 4.66654C13.6481 5.65323 14 6.81327 14 7.99996C14 9.59126 13.3678 11.1174 12.2426 12.2426C11.1174 13.3678 9.59126 14 7.99996 14Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<h5 class="text-xs leading-tight font-medium text-gray-300">Main account</h5>
<h4 class="leading-6 text-gray-100 font-semibold">$16,045.00</h4>
</div>
</div>
<div class="flex items-end -mx-2">
<div class="w-1/5 px-2">
<div class="group relative h-8 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-10 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-14 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6">
<div class="p-4 bg-gray-500 rounded-xl">
<div class="max-w-xxs px-6 md:px-0 md:max-w-none mx-auto">
<div class="flex flex-wrap items-center mb-6 -m-2">
<div class="w-auto p-2 self-start">
<div class="flex w-8 h-8 items-center justify-center bg-gray-600 rounded-xl">
<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.33338 6.00001H7.00005C7.17686 6.00001 7.34643 5.92977 7.47145 5.80474C7.59647 5.67972 7.66671 5.51015 7.66671 5.33334C7.66671 5.15653 7.59647 4.98696 7.47145 4.86193C7.34643 4.73691 7.17686 4.66667 7.00005 4.66667H6.33338V4.33334C6.33338 4.15653 6.26314 3.98696 6.13812 3.86193C6.01309 3.73691 5.84352 3.66667 5.66671 3.66667C5.4899 3.66667 5.32033 3.73691 5.19531 3.86193C5.07028 3.98696 5.00005 4.15653 5.00005 4.33334V4.70001C4.595 4.78225 4.23495 5.01207 3.98982 5.34485C3.74468 5.67762 3.63194 6.08961 3.67348 6.50084C3.71501 6.91206 3.90787 7.29318 4.2146 7.57021C4.52133 7.84725 4.92006 8.00042 5.33338 8.00001H6.00005C6.08845 8.00001 6.17324 8.03512 6.23575 8.09764C6.29826 8.16015 6.33338 8.24493 6.33338 8.33334C6.33338 8.42174 6.29826 8.50653 6.23575 8.56904C6.17324 8.63155 6.08845 8.66667 6.00005 8.66667H4.33338C4.15657 8.66667 3.987 8.73691 3.86198 8.86193C3.73695 8.98696 3.66671 9.15653 3.66671 9.33334C3.66671 9.51015 3.73695 9.67972 3.86198 9.80474C3.987 9.92977 4.15657 10 4.33338 10H5.00005V10.3333C5.00005 10.5101 5.07028 10.6797 5.19531 10.8047C5.32033 10.9298 5.4899 11 5.66671 11C5.84352 11 6.01309 10.9298 6.13812 10.8047C6.26314 10.6797 6.33338 10.5101 6.33338 10.3333V9.96667C6.73843 9.88442 7.09847 9.6546 7.34361 9.32183C7.58875 8.98905 7.70149 8.57706 7.65995 8.16584C7.61841 7.75461 7.42556 7.37349 7.11882 7.09646C6.81209 6.81943 6.41336 6.66626 6.00005 6.66667H5.33338C5.24497 6.66667 5.16019 6.63155 5.09768 6.56904C5.03516 6.50653 5.00005 6.42174 5.00005 6.33334C5.00005 6.24493 5.03516 6.16015 5.09768 6.09764C5.16019 6.03512 5.24497 6.00001 5.33338 6.00001ZM13 7.00001H11V1C11.0005 0.882532 10.9699 0.767021 10.9114 0.665169C10.8529 0.563317 10.7684 0.478741 10.6667 0.420005C10.5654 0.361493 10.4504 0.330688 10.3334 0.330688C10.2164 0.330688 10.1014 0.361493 10 0.420005L8.00005 1.56667L6.00005 0.420005C5.8987 0.361493 5.78374 0.330688 5.66671 0.330688C5.54969 0.330688 5.43473 0.361493 5.33338 0.420005L3.33338 1.56667L1.33338 0.420005C1.23203 0.361493 1.11707 0.330688 1.00005 0.330688C0.883022 0.330688 0.768059 0.361493 0.666713 0.420005C0.564976 0.478741 0.480567 0.563317 0.422031 0.665169C0.363496 0.767021 0.332913 0.882532 0.333379 1V11.6667C0.333379 12.1971 0.544093 12.7058 0.919166 13.0809C1.29424 13.456 1.80295 13.6667 2.33338 13.6667H11.6667C12.1971 13.6667 12.7059 13.456 13.0809 13.0809C13.456 12.7058 13.6667 12.1971 13.6667 11.6667V7.66667C13.6667 7.48986 13.5965 7.32029 13.4715 7.19527C13.3464 7.07024 13.1769 7.00001 13 7.00001ZM2.33338 12.3333C2.15657 12.3333 1.987 12.2631 1.86197 12.1381C1.73695 12.0131 1.66671 11.8435 1.66671 11.6667V2.15334L3.00005 2.91334C3.10294 2.96708 3.2173 2.99515 3.33338 2.99515C3.44946 2.99515 3.56382 2.96708 3.66671 2.91334L5.66671 1.76667L7.66671 2.91334C7.7696 2.96708 7.88396 2.99515 8.00005 2.99515C8.11613 2.99515 8.23049 2.96708 8.33338 2.91334L9.66671 2.15334V11.6667C9.66852 11.8941 9.7091 12.1196 9.78671 12.3333H2.33338ZM12.3334 11.6667C12.3334 11.8435 12.2631 12.0131 12.1381 12.1381C12.0131 12.2631 11.8435 12.3333 11.6667 12.3333C11.4899 12.3333 11.3203 12.2631 11.1953 12.1381C11.0703 12.0131 11 11.8435 11 11.6667V8.33334H12.3334V11.6667Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<h5 class="text-xs leading-tight font-medium text-gray-300">Taxes</h5>
<h4 class="leading-6 text-gray-100 font-semibold">$5,025.00</h4>
</div>
</div>
<div class="flex items-end -mx-2">
<div class="w-1/5 px-2">
<div class="group relative h-8 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-10 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-14 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6">
<div class="p-4 bg-gray-500 rounded-xl">
<div class="max-w-xxs px-6 md:px-0 md:max-w-none mx-auto">
<div class="flex flex-wrap items-center mb-6 -m-2">
<div class="w-auto p-2 self-start">
<div class="flex w-8 h-8 items-center justify-center bg-gray-600 rounded-xl">
<svg width="14" height="12" viewbox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.1467 6C13.4786 5.63491 13.6638 5.16004 13.6667 4.66667C13.6667 4.13623 13.456 3.62753 13.0809 3.25245C12.7058 2.87738 12.1971 2.66667 11.6667 2.66667H8.21337C8.31987 2.36545 8.35266 2.04311 8.30899 1.72662C8.26532 1.41013 8.14646 1.10871 7.96237 0.847589C7.77828 0.586469 7.53432 0.373251 7.2509 0.225785C6.96748 0.0783194 6.65286 0.000897008 6.33337 0H2.33337C1.80294 0 1.29423 0.210714 0.91916 0.585787C0.544088 0.960859 0.333374 1.46957 0.333374 2C0.336314 2.49337 0.521515 2.96824 0.853374 3.33333C0.525404 3.70002 0.344086 4.17471 0.344086 4.66667C0.344086 5.15862 0.525404 5.63332 0.853374 6C0.525404 6.36668 0.344086 6.84138 0.344086 7.33333C0.344086 7.82529 0.525404 8.29998 0.853374 8.66667C0.521515 9.03176 0.336314 9.50663 0.333374 10C0.333374 10.5304 0.544088 11.0391 0.91916 11.4142C1.29423 11.7893 1.80294 12 2.33337 12H11.6667C12.0519 11.9979 12.4283 11.8847 12.7506 11.6739C13.073 11.4631 13.3276 11.1637 13.4839 10.8116C13.6403 10.4596 13.6916 10.0699 13.6318 9.6894C13.5719 9.30889 13.4035 8.95376 13.1467 8.66667C13.4747 8.29998 13.656 7.82529 13.656 7.33333C13.656 6.84138 13.4747 6.36668 13.1467 6ZM6.33337 10.6667H2.33337C2.15656 10.6667 1.98699 10.5964 1.86197 10.4714C1.73695 10.3464 1.66671 10.1768 1.66671 10C1.66671 9.82319 1.73695 9.65362 1.86197 9.52859C1.98699 9.40357 2.15656 9.33333 2.33337 9.33333H6.33337C6.51018 9.33333 6.67975 9.40357 6.80478 9.52859C6.9298 9.65362 7.00004 9.82319 7.00004 10C7.00004 10.1768 6.9298 10.3464 6.80478 10.4714C6.67975 10.5964 6.51018 10.6667 6.33337 10.6667ZM6.33337 8H2.33337C2.15656 8 1.98699 7.92976 1.86197 7.80474C1.73695 7.67971 1.66671 7.51014 1.66671 7.33333C1.66671 7.15652 1.73695 6.98695 1.86197 6.86193C1.98699 6.73691 2.15656 6.66667 2.33337 6.66667H6.33337C6.51018 6.66667 6.67975 6.73691 6.80478 6.86193C6.9298 6.98695 7.00004 7.15652 7.00004 7.33333C7.00004 7.51014 6.9298 7.67971 6.80478 7.80474C6.67975 7.92976 6.51018 8 6.33337 8ZM6.33337 5.33333H2.33337C2.15656 5.33333 1.98699 5.2631 1.86197 5.13807C1.73695 5.01305 1.66671 4.84348 1.66671 4.66667C1.66671 4.48986 1.73695 4.32029 1.86197 4.19526C1.98699 4.07024 2.15656 4 2.33337 4H6.33337C6.51018 4 6.67975 4.07024 6.80478 4.19526C6.9298 4.32029 7.00004 4.48986 7.00004 4.66667C7.00004 4.84348 6.9298 5.01305 6.80478 5.13807C6.67975 5.2631 6.51018 5.33333 6.33337 5.33333ZM6.33337 2.66667H2.33337C2.15656 2.66667 1.98699 2.59643 1.86197 2.4714C1.73695 2.34638 1.66671 2.17681 1.66671 2C1.66671 1.82319 1.73695 1.65362 1.86197 1.5286C1.98699 1.40357 2.15656 1.33333 2.33337 1.33333H6.33337C6.51018 1.33333 6.67975 1.40357 6.80478 1.5286C6.9298 1.65362 7.00004 1.82319 7.00004 2C7.00004 2.17681 6.9298 2.34638 6.80478 2.4714C6.67975 2.59643 6.51018 2.66667 6.33337 2.66667ZM12.1267 10.4733C12.0676 10.5357 11.9962 10.585 11.917 10.6183C11.8378 10.6516 11.7526 10.6681 11.6667 10.6667H8.21337C8.37324 10.2366 8.37324 9.7634 8.21337 9.33333H11.6667C11.8435 9.33333 12.0131 9.40357 12.1381 9.52859C12.2631 9.65362 12.3334 9.82319 12.3334 10C12.3321 10.0887 12.3132 10.1762 12.2777 10.2575C12.2423 10.3388 12.1909 10.4121 12.1267 10.4733ZM12.1267 7.80667C12.0676 7.869 11.9962 7.91837 11.917 7.95165C11.8378 7.98493 11.7526 8.0014 11.6667 8H8.21337C8.37324 7.56993 8.37324 7.09674 8.21337 6.66667H11.6667C11.8435 6.66667 12.0131 6.73691 12.1381 6.86193C12.2631 6.98695 12.3334 7.15652 12.3334 7.33333C12.3321 7.42201 12.3132 7.50955 12.2777 7.59083C12.2423 7.6721 12.1909 7.74548 12.1267 7.80667ZM12.1267 5.14C12.0676 5.20233 11.9962 5.2517 11.917 5.28499C11.8378 5.31827 11.7526 5.33473 11.6667 5.33333H8.21337C8.37324 4.90327 8.37324 4.43007 8.21337 4H11.6667C11.8435 4 12.0131 4.07024 12.1381 4.19526C12.2631 4.32029 12.3334 4.48986 12.3334 4.66667C12.3321 4.75534 12.3132 4.84288 12.2777 4.92416C12.2423 5.00544 12.1909 5.07882 12.1267 5.14Z" fill="#194BFB"></path>
</svg>
</div>
</div>
<div class="w-auto p-2">
<h5 class="text-xs leading-tight font-medium text-gray-300">Savings</h5>
<h4 class="leading-6 text-gray-100 font-semibold">$2,525.00</h4>
</div>
</div>
<div class="flex items-end -mx-2">
<div class="w-1/5 px-2">
<div class="group relative h-8 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-10 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-14 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
<div class="w-1/5 px-2">
<div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
<div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
<span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
<div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-6">
<div class="pt-6 pb-14 px-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap -mx-3 -mb-4 justify-between items-center">
<div class="w-auto px-3 mb-4">
<h4 class="text-lg text-gray-200 font-bold tracking-wide">Money Flow</h4>
</div>
<div class="w-full sm:w-auto px-3 mb-4">
<div class="flex flex-wrap items-center">
<div class="flex items-center mr-4">
<span class="inline-block w-3 h-1 mr-1 bg-blue-500 rounded-full"></span>
<span class="text-xs font-semibold text-gray-100">Income</span>
</div>
<div class="flex items-center mr-6">
<span class="inline-block w-3 h-1 mr-1 bg-yellow-500 rounded-full"></span>
<span class="text-xs font-semibold text-gray-100">Expenses</span>
</div>
<div class="w-full sm:w-auto mt-4 sm:mt-0">
<div class="relative inline-block max-w-max bg-gray-600 rounded-xl">
<select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
<option value="">7 Days</option>
<option value="">30 Days</option>
</select>
<span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
<svg width="10" height="7" viewbox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="chart mt-8 mb-3" data-type="chart-line" style="min-height: 200px;"></div>
</div>
</div>
<div>
<div class="pt-6 pb-14 px-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap -mx-3 mb-6 justify-between items-center">
<div class="w-auto px-3">
<h4 class="text-lg text-gray-200 font-bold tracking-wide">Statistics</h4>
</div>
<div class="w-auto px-3">
<a class="inline-flex h-9 px-3 items-center text-xs font-semibold bg-gray-600 hover:bg-gray-700 transition duration-200 rounded-lg" href="#">
<span class="mr-2 text-gray-300">View All</span>
<svg width="7" height="10" viewbox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 9L5.5 5L1.5 1" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="px-8 md:px-14 py-10 bg-gray-600 rounded-xl">
<div class="flex flex-wrap items-center justify-between -mx-2">
<div class="w-full md:w-1/2 px-2 mb-12 md:mb-0">
<div class="max-w-xxs pr-12">
<div class="flex flex-wrap -mx-2 -mb-3">
<div class="w-1/2 px-2 mb-3">
<div class="flex items-center">
<div class="w-1.5 h-1.5 mr-3 bg-purple-500 rounded-full"></div>
<div>
<h5 class="text-sm leading-5 text-gray-300 font-semibold">$725.00</h5>
<span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Shopping</span>
</div>
</div>
</div>
<div class="w-1/2 px-2 mb-3">
<div class="flex items-center">
<div class="w-1.5 h-1.5 mr-3 bg-green-500 rounded-full"></div>
<div>
<h5 class="text-sm leading-5 text-gray-300 font-semibold">$725.00</h5>
<span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Food</span>
</div>
</div>
</div>
<div class="w-1/2 px-2 mb-3">
<div class="flex items-center">
<div class="w-1.5 h-1.5 mr-3 bg-blue-500 rounded-full"></div>
<div>
<h5 class="text-sm leading-5 text-gray-300 font-semibold">$2,350.00</h5>
<span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Home</span>
</div>
</div>
</div>
<div class="w-1/2 px-2 mb-3">
<div class="flex items-center">
<div class="w-1.5 h-1.5 mr-3 bg-yellow-500 rounded-full"></div>
<div>
<h5 class="text-sm leading-5 text-gray-300 font-semibold">$710.00</h5>
<span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Others</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 px-2">
<div class="chart px-2" data-type="radial-bar-part" data-variant="four" style="min-height: 120px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-2/5 px-3">
<div class="p-6 bg-gray-500 rounded-xl">
<div class="flex flex-wrap -mx-3 mb-6 justify-between items-center">
<div class="w-auto px-3">
<h4 class="text-lg text-gray-100 font-semibold">Wallet</h4>
</div>
<div class="w-auto px-3">
<a class="inline-block py-1 text-gray-300 hover:text-gray-400" href="#">
<svg width="18" height="4" viewbox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 2C8 2.55228 8.44772 3 9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M15 2C15 2.55228 15.4477 3 16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="px-3 md:px-14 pb-6 mb-8 border-b border-gray-400">
<img class="block mx-auto mb-6" src="trizzle-assets/images/card.png" alt="">
<div class="mb-6 text-center">
<button class="inline-block w-6 h-1 mr-1 bg-blue-500 rounded-full"></button>
<button class="inline-block w-2.5 h-1 mr-1 bg-gray-600 hover:w-6 rounded-full transition-all duration-500"></button>
<button class="inline-block w-2.5 h-1 mr-1 bg-gray-600 hover:w-6 rounded-full transition-all duration-500"></button>
</div>
<a class="flex w-full h-12 py-2 px-3 items-center justify-center text-gray-200 font-semibold bg-gray-600 hover:bg-gray-700 transition duration-200 rounded-lg" href="#">
<svg width="17" height="14" viewbox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3334 0.75H2.66669C2.00365 0.75 1.36776 1.01339 0.89892 1.48223C0.430079 1.95107 0.166687 2.58696 0.166687 3.25V10.75C0.166687 11.413 0.430079 12.0489 0.89892 12.5178C1.36776 12.9866 2.00365 13.25 2.66669 13.25H14.3334C14.9964 13.25 15.6323 12.9866 16.1011 12.5178C16.57 12.0489 16.8334 11.413 16.8334 10.75V3.25C16.8334 2.58696 16.57 1.95107 16.1011 1.48223C15.6323 1.01339 14.9964 0.75 14.3334 0.75ZM15.1667 10.75C15.1667 10.971 15.0789 11.183 14.9226 11.3393C14.7663 11.4955 14.5544 11.5833 14.3334 11.5833H2.66669C2.44567 11.5833 2.23371 11.4955 2.07743 11.3393C1.92115 11.183 1.83335 10.971 1.83335 10.75V3.25C1.83335 3.02899 1.92115 2.81702 2.07743 2.66074C2.23371 2.50446 2.44567 2.41667 2.66669 2.41667H14.3334C14.5544 2.41667 14.7663 2.50446 14.9226 2.66074C15.0789 2.81702 15.1667 3.02899 15.1667 3.25V10.75ZM11.8334 5.75C11.3903 5.7531 10.956 5.87389 10.575 6.1C10.1954 5.87477 9.763 5.75405 9.32165 5.7501C8.8803 5.74615 8.44577 5.85912 8.06222 6.07752C7.67867 6.29592 7.35978 6.61197 7.13796 6.99355C6.91613 7.37513 6.79928 7.80863 6.79928 8.25C6.79928 8.69137 6.91613 9.12487 7.13796 9.50645C7.35978 9.88803 7.67867 10.2041 8.06222 10.4225C8.44577 10.6409 8.8803 10.7538 9.32165 10.7499C9.763 10.746 10.1954 10.6252 10.575 10.4C10.9065 10.5967 11.279 10.714 11.6634 10.7429C12.0477 10.7718 12.4336 10.7114 12.7908 10.5664C13.1479 10.4215 13.4667 10.1959 13.7223 9.90736C13.9778 9.6188 14.1632 9.27505 14.2639 8.90298C14.3645 8.5309 14.3778 8.14059 14.3027 7.76253C14.2275 7.38448 14.066 7.02892 13.8307 6.72364C13.5953 6.41836 13.2926 6.17163 12.9461 6.00273C12.5996 5.83383 12.2188 5.74733 11.8334 5.75ZM9.47502 9.08333C9.42788 9.08735 9.38049 9.08735 9.33335 9.08333C9.11234 9.08333 8.90038 8.99554 8.7441 8.83926C8.58782 8.68297 8.50002 8.47101 8.50002 8.25C8.50002 8.02899 8.58782 7.81702 8.7441 7.66074C8.90038 7.50446 9.11234 7.41667 9.33335 7.41667C9.38049 7.41265 9.42788 7.41265 9.47502 7.41667C9.28645 7.93333 9.28645 8.5 9.47502 9.01667V9.08333ZM11.8334 9.08333C11.6685 9.08333 11.5074 9.03446 11.3704 8.94289C11.2333 8.85132 11.1265 8.72117 11.0635 8.5689C11.0004 8.41663 10.9839 8.24908 11.016 8.08742C11.0482 7.92577 11.1276 7.77729 11.2441 7.66074C11.3606 7.5442 11.5091 7.46483 11.6708 7.43268C11.8324 7.40052 12 7.41703 12.1523 7.4801C12.3045 7.54317 12.4347 7.64998 12.5262 7.78702C12.6178 7.92407 12.6667 8.08518 12.6667 8.25C12.6667 8.47101 12.5789 8.68297 12.4226 8.83926C12.2663 8.99554 12.0544 9.08333 11.8334 9.08333Z" fill="#3D485B"></path>
</svg>
<span class="ml-2">Add new Card</span>
</a>
</div>
<div>
<div class="flex mb-6 items-center justify-between">
<h4 class="text-lg text-gray-200 font-semibold">Recent Activity</h4>
<a class="inline-block text-sm text-gray-200 hover:text-gray-300 font-medium tracking-wide" href="#">View all</a>
</div>
<div class="flex mb-6 items-center justify-between">
<div class="flex items-center">
<div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
<img src="trizzle-assets/logos/s-stripe.svg" alt="">
</div>
<div>
<h5 class="text-sm font-semibold text-gray-200">Stripe</h5>
<span class="text-xs text-gray-400 font-semibold">Deposit</span>
</div>
</div>
<div class="text-right">
<h6 class="text-sm text-gray-300 font-semibold">+$523.10</h6>
<span class="text-xs text-gray-400 font-semibold">Today at 7.18 AM</span>
</div>
</div>
<div class="flex mb-6 items-center justify-between">
<div class="flex items-center">
<div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
<img src="trizzle-assets/logos/f-facebook.svg" alt="">
</div>
<div>
<h5 class="text-sm font-semibold text-gray-200">Facebook</h5>
<span class="text-xs text-gray-400 font-semibold">Advertising</span>
</div>
</div>
<div class="text-right">
<h6 class="text-sm text-gray-300 font-semibold">+$523.10</h6>
<span class="text-xs text-gray-400 font-semibold">Today at 7.18 AM</span>
</div>
</div>
<div class="flex mb-6 items-center justify-between">
<div class="flex items-center">
<div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
<img src="trizzle-assets/logos/twitter-icon.svg" alt="">
</div>
<div>
<h5 class="text-sm font-semibold text-gray-200">Twitter</h5>
<span class="text-xs text-gray-400 font-semibold">Advertising</span>
</div>
</div>
<div class="text-right">
<h6 class="text-sm text-gray-300 font-semibold">-$1,243.00</h6>
<span class="text-xs text-gray-400 font-semibold">Yesterday at 10.00 PM</span>
</div>
</div>
<div class="flex mb-6 items-center justify-between">
<div class="flex items-center">
<div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
<img src="trizzle-assets/logos/slack-icon.svg" alt="">
</div>
<div>
<h5 class="text-sm font-semibold text-gray-200">Slack</h5>
<span class="text-xs text-gray-400 font-semibold">Payment</span>
</div>
</div>
<div class="text-right">
<h6 class="text-sm text-gray-300 font-semibold">-$190.00</h6>
<span class="text-xs text-gray-400 font-semibold">Yesterday at 4.00 PM</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
<img src="trizzle-assets/logos/steam-icon.svg" alt="">
</div>
<div>
<h5 class="text-sm font-semibold text-gray-200">Steam</h5>
<span class="text-xs text-gray-400 font-semibold">Payment</span>
</div>
</div>
<div class="text-right">
<h6 class="text-sm text-gray-300 font-semibold">-$450.00</h6>
<span class="text-xs text-gray-400 font-semibold">Yesterday at 4.00 PM</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
