Explore our examples
Some examples of common UI interfaces built using our utilities. Use them as a base for building your own.
Preview
Code
Create an account
Use your email and a password to create a new account.
Your password must contain at least 8 characters.
Use a combination of uppercase letters, lowercase letters, numbers, and symbols.
Already have an account?
Log in
<div class="relative grid md:grid-cols-2 justify-center h-screen" style="max-height:600px;">
<div class="bg-white w-full h-full flex items-center justify-center">
<div class="w-full max-w-md p-8">
<div class="mb-4">
<div class="font-medium text-xl text-gray-950 mb-0">Create an account</div>
<div class="text-sm text-gray-700">Use your email and a password to create a new account.</div>
</div>
<div class="mb-4 flex flex-col gap-2">
<div class="flex flex-col gap-1">
<label class="block font-medium text-sm">Your email</label>
<input type="email" class="w-full border-1 border-gray-200 px-3 py-2 text-sm rounded-md outline-neutral-950" placeholder="you@email.com" />
</div>
<div class="flex flex-col gap-1">
<label class="block font-medium text-sm">Your password</label>
<input type="password" class="w-full border-1 border-gray-200 px-3 py-2 text-sm rounded-md outline-neutral-950" placeholder="******" />
<div class="text-2xs text-gray-600">
Your password must contain at least 8 characters.
Use a combination of uppercase letters, lowercase letters, numbers, and symbols.
</div>
</div>
</div>
<div class="mb-4">
<button class="px-3 py-2 font-bold bg-gray-950 hover:bg-gray-800 text-white cursor-pointer rounded-md w-full shadow-sm">
Create Account
</button>
</div>
<div class="text-center text-xs">
<span class="text-gray-800">Already have an account?</span>
<a href="#" class="text-gray-950 hover:underline font-bold">Log in</a>
</div>
</div>
</div>
<div class="bg-gray-950 w-full h-full hidden md:flex flex-col text-white p-10">
<div class="text-xl font-medium">Minimal Corp.</div>
</div>
</div>
Preview
Code
Welcome back, Bob.
This is your personal dashboard. Here you will find metrics, a resume of your latest orders, and will allow you to download a report of your account.
Total Sales
$ 1,234,567
+12% from last month.
Total Orders
123,456
+30% from last month.
Subscriptions
123,456
+10% from last month.
Visitors
87,654,321
+15% from last month.
Recent orders
| Order ID | Order Date | Customer Name | Total | Status | |
|---|---|---|---|---|---|
| 1005 | 2024-07-19 | John Doe | $29.99 | Processing | |
| 1004 | 2024-07-19 | Carol White | $9.99 | Shipped | |
| 1003 | 2024-07-18 | Alice Johnson | $99.99 | Processing | |
| 1002 | 2024-07-17 | Jane Smith | $49.99 | Processing | |
| 1001 | 2024-07-15 | Bob Brown | $19.99 | Delivered |
Showing 1 to 5 of 123 orders.
Page 1 of 100
<div class="w-full">
<div class="w-full flex items-center gap-4 h-16 border-b-1 border-gray-200 px-6">
<a href="#" class="flex items-center gap-1 text-gray-950">
<div class="flex items-center text-2xl">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#owl"></use></svg>
</div>
<div class="font-bold">Owl Inc.</div>
</a>
<div class="hidden md:flex items-center gap-4">
<a href="#" class="text-sm font-medium text-gray-950">Overview</a>
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-950">Products</a>
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-950">Orders</a>
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-950">Analytics</a>
</div>
<div class="flex items-center ml-auto">
<div class="relative group">
<button class="flex items-center justify-center rounded-full border-1 border-gray-200 h-8 w-8 cursor-pointer text-gray-900 text-lg bg-white">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#user"></use></svg>
</button>
<div class="absolute hidden group-focus-within:block top-full right-0 mt-1">
<div class="border-1 border-gray-200 p-1 rounded-lg bg-white text-sm shadow-sm w-40 select-none">
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Profile</a>
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Settings</a>
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Contact Support</a>
<div class="w-full h-px bg-gray-200 my-1"></div>
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Logout</a>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 py-8">
<div class="mb-12 w-full max-w-md">
<div class="text-4xl font-medium text-gray-950 mb-1">
Welcome back, <span class="font-bold">Bob</span>.
</div>
<div class="text-gray-800 mb-4">
This is your personal dashboard. Here you will find metrics, a resume of your latest orders, and will allow you to download a report of your account.
</div>
<div class="">
<button class="px-3 py-2 bg-gray-950 hover:bg-gray-800 text-white rounded-md cursor-pointer">
<span class="font-bold">Download Report</span>
</button>
</div>
</div>
<div class="w-full grid sm:grid-cols-2 md:grid-cols-4 gap-4 mb-10">
<div class="w-full border-1 border-gray-200 rounded-lg p-6 shadow-sm">
<div class="text-gray-950 text-sm font-medium mb-1">Total Sales</div>
<div class="text-gray-950 text-2xl font-bold mb-0">$ 1,234,567</div>
<div class="text-gray-600 text-xs">+12% from last month.</div>
</div>
<div class="w-full border-1 border-gray-200 rounded-lg p-6 shadow-sm">
<div class="text-gray-950 text-sm font-medium mb-1">Total Orders</div>
<div class="text-gray-950 text-2xl font-bold mb-0">123,456</div>
<div class="text-gray-600 text-xs">+30% from last month.</div>
</div>
<div class="w-full border-1 border-gray-200 rounded-lg p-6 shadow-sm">
<div class="text-gray-950 text-sm font-medium mb-1">Subscriptions</div>
<div class="text-gray-950 text-2xl font-bold mb-0">123,456</div>
<div class="text-gray-600 text-xs">+10% from last month.</div>
</div>
<div class="w-full border-1 border-gray-200 rounded-lg p-6 shadow-sm">
<div class="text-gray-950 text-sm font-medium mb-1">Visitors</div>
<div class="text-gray-950 text-2xl font-bold mb-0">87,654,321</div>
<div class="text-gray-600 text-xs">+15% from last month.</div>
</div>
</div>
<div class="w-full">
<div class="text-xl text-gray-950 font-bold mb-2">Recent orders</div>
<div class="rounded-lg border-1 border-gray-200 mb-4 w-full overflow-y-auto">
<table class="w-full text-sm">
<thead class="border-b-1 border-gray-200">
<tr class="">
<th class="h-10 px-2 text-left align-middle font-medium">
<input type="checkbox" class="rounded-md border-1 border-gray-950 cursor-pointer">
</th>
<th class="h-10 px-2 text-left align-middle font-medium">Order ID</th>
<th class="h-10 px-2 text-left align-middle font-medium">Order Date</th>
<th class="h-10 px-2 text-left align-middle font-medium">Customer Name</th>
<th class="h-10 px-2 text-left align-middle font-medium">Total</th>
<th class="h-10 px-2 text-left align-middle font-medium">Status</th>
</tr>
</thead>
<tbody>
<tr class="border-b-1 border-gray-200 hover:bg-gray-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border-1 border-gray-950 cursor-pointer">
</td>
<td class="p-2 align-middle">1005</td>
<td class="p-2 align-middle">2024-07-19</td>
<td class="p-2 align-middle">John Doe</td>
<td class="p-2 align-middle">$29.99</td>
<td class="p-2 align-middle">Processing</td>
</tr>
<tr class="border-b-1 border-gray-200 hover:bg-gray-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border-1 border-gray-950 cursor-pointer">
</td>
<td class="p-2 align-middle">1004</td>
<td class="p-2 align-middle">2024-07-19</td>
<td class="p-2 align-middle">Carol White</td>
<td class="p-2 align-middle">$9.99</td>
<td class="p-2 align-middle">Shipped</td>
</tr>
<tr class="border-b-1 border-gray-200 hover:bg-gray-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border-1 border-gray-950 cursor-pointer">
</td>
<td class="p-2 align-middle">1003</td>
<td class="p-2 align-middle">2024-07-18</td>
<td class="p-2 align-middle">Alice Johnson</td>
<td class="p-2 align-middle">$99.99</td>
<td class="p-2 align-middle">Processing</td>
</tr>
<tr class="border-b-1 border-gray-200 hover:bg-gray-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border-1 border-gray-950 cursor-pointer">
</td>
<td class="p-2 align-middle">1002</td>
<td class="p-2 align-middle">2024-07-17</td>
<td class="p-2 align-middle">Jane Smith </td>
<td class="p-2 align-middle">$49.99</td>
<td class="p-2 align-middle">Processing</td>
</tr>
<tr class="rounded-bl-lg roundedbr-lg hover:bg-gray-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border-1 border-gray-950 cursor-pointer">
</td>
<td class="p-2 align-middle">1001</td>
<td class="p-2 align-middle">2024-07-15</td>
<td class="p-2 align-middle">Bob Brown </td>
<td class="p-2 align-middle">$19.99</td>
<td class="p-2 align-middle">Delivered</td>
</tr>
</tbody>
</table>
</div>
<div class="w-full flex items-center gap-4">
<div class="hidden sm:block text-xs text-gray-600">Showing 1 to 5 of 123 orders.</div>
<div class="flex items-center gap-1 ml-auto">
<button class="flex items-center justify-center rounded-md border-1 border-gray-200 w-8 h-8 p-0 text-lg bg-white cursor-not-allowed opacity-50">
</button>
<button class="flex items-center justify-center rounded-md border-1 border-gray-200 w-8 h-8 p-0 text-lg bg-white cursor-not-allowed opacity-50">
</button>
<div class="text-xs text-gray-900 mx-2 font-medium">Page 1 of 100</div>
<button class="flex items-center justify-center rounded-md border-1 border-gray-200 w-8 h-8 p-0 text-lg bg-white hover:bg-gray-50 cursor-pointer">
</button>
<button class="flex items-center justify-center rounded-md border-1 border-gray-200 w-8 h-8 p-0 text-lg bg-white hover:bg-gray-50 cursor-pointer">
</button>
</div>
</div>
</div>
</div>
</div>
Preview
Code
Projects
ABCD Corp.
Website
Website
This is the main project for the website of ABCD Corp.
Kanban
List
Calendar
Filter
Export
To Do
Add task
Redesign About
We have to redesign the About page, and include the new team members.
design
marketing
3
Refactor main components
We have to refactor the main components of the website to match new version 2.4.
design
5
In Progress
Add task
Create new landing page
We have to create a new landing page for the new product.
design
marketing
2
Update pricing page
We have to update the pricing page with the new prices.
design
1
Move FAQ
Client has decied to move the FAQ section to the About page.
design
5
Branding
Update the branding with the new colors.
design
marketing
12
Review
Add task
Update footer
We have to update the footer with the new social media links.
design
marketing
3
Update header
We have to update the header with the new logo.
design
2
Home Page bug fixes
We found some bugs in the home page. List attached on ticket.
bug
10
Done
Add task
Update blog
We have to update the blog with the new articles.
design
marketing
4
Update contact page
We have to update the contact page with the new contact information.
design
2
<div class="w-full flex flex-col gap-4 bg-gray-50 relative py-4 pl-20 pr-4">
<!-- Sidebar -->
<div class="bg-white w-16 absolute top-0 bottom-0 left-0 z-10 border-r-1 border-gray-200 flex flex-col justify-between">
<div class="flex flex-col gap-1 px-2 py-4">
<a class="flex items-center justify-center text-white bg-gray-950 rounded-full py-3 text-2xl mb-4">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#kanban"></use></svg>
</a>
<a class="flex items-center justify-center text-gray-800 hover:text-gray-950 hover:bg-gray-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#home"></use></svg>
</a>
<a class="flex items-center justify-center text-gray-800 hover:text-gray-950 hover:bg-gray-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#layout"></use></svg>
</a>
<a class="flex items-center justify-center text-gray-800 hover:text-gray-950 hover:bg-gray-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#folder"></use></svg>
</a>
<a class="flex items-center justify-center text-gray-800 hover:text-gray-950 hover:bg-gray-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#users"></use></svg>
</a>
</div>
<div class="flex flex-col gap-1 px-2 py-4">
<a class="flex items-center justify-center text-gray-800 hover:text-gray-950 hover:bg-gray-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#tool"></use></svg>
</a>
</div>
</div>
<!-- Header -->
<div class="w-full flex items-center justify-between mb-6">
<div class="flex items-center gap-2">
<div class="text-gray-700 hover:text-gray-900 cursor-pointer hover:underline">Projects</div>
<div class="text-gray-500">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#chevron-right"></use></svg>
</div>
<div class="text-gray-700 hover:text-gray-900 cursor-pointer hover:underline">ABCD Corp.</div>
<div class="text-gray-500">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#chevron-right"></use></svg>
</div>
<div class="text-gray-950">Website</div>
</div>
<div class="relative group">
<button class="flex items-center justify-center rounded-full border-1 border-gray-200 h-8 w-8 cursor-pointer text-gray-900 text-lg bg-white">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#user"></use></svg>
</button>
<div class="absolute hidden group-focus-within:block top-full right-0 mt-1">
<div class="border-1 border-gray-200 p-1 rounded-lg bg-white text-sm shadow-sm w-40 select-none">
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Profile</a>
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Settings</a>
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Contact Support</a>
<div class="w-full h-px bg-gray-200 my-1"></div>
<a class="flex items-center hover:bg-gray-100 px-2 py-1 rounded-md font-medium cursor-pointer">Logout</a>
</div>
</div>
</div>
</div>
<!-- Description -->
<div class="w-full">
<div class="text-gray-950 text-2xl font-bold">Website</div>
<div class="text-gray-500 text-sm">This is the main project for the website of ABCD Corp.</div>
</div>
<!-- Filters and views -->
<div class="w-full flex items-center justify-between gap-4 select-none mt-3">
<div class="flex items-center gap-1 p-1 bg-gray-100 rounded-lg border-1 border-gray-200">
<div class="bg-white text-gray-900 font-medium text-xs px-2 py-1 rounded-md shadow-sm">Kanban</div>
<div class="cursor-pointer hover:bg-white text-gray-700 text-xs px-2 py-1 rounded-md">List</div>
<div class="cursor-pointer hover:bg-white text-gray-700 text-xs px-2 py-1 rounded-md">Calendar</div>
</div>
<div class="flex items-center gap-2">
<div class="relative">
<div class="absolute top-0 left-0 text-gray-500 text-base px-2 py-2">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#search"></use></svg>
</div>
<input type="text" class="border-0 bg-white py-1 pr-2 pl-8 border-1 border-gray-200 rounded-lg bg-white text-sm" placeholder="Search for a task..." />
</div>
<div class="flex items-center justify-center gap-1 bg-white hover:bg-gray-100 text-900 rounded-lg px-3 py-1 border-1 border-gray-200 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#filter"></use></svg>
<div class="text-sm font-medium">Filter</div>
</div>
<div class="flex items-center justify-center gap-1 bg-white hover:bg-gray-100 text-900 rounded-lg px-3 py-1 border-1 border-gray-200 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#download"></use></svg>
<div class="text-sm font-medium">Export</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="w-full grid grid-cols-4 gap-4 items-start mb-16">
<div class="w-full flex flex-col gap-2">
<div class="flex items-center gap-2">
<div class="flex bg-gray-500 rounded-full w-3 h-3"></div>
<div class="text-gray-700 font-bold">To Do</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-gray-100 rounded-lg border-1 border-gray-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Redesign About</div>
<div class="text-gray-500 text-xs">We have to redesign the About page, and include the new team members.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">3</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Refactor main components</div>
<div class="text-gray-500 text-xs">We have to refactor the main components of the website to match new version 2.4.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">5</div>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-2">
<div class="flex items-center gap-2">
<div class="flex bg-blue-500 rounded-full w-3 h-3"></div>
<div class="text-gray-700 font-bold">In Progress</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-gray-100 rounded-lg border-1 border-gray-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Create new landing page</div>
<div class="text-gray-500 text-xs">We have to create a new landing page for the new product.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">2</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Update pricing page</div>
<div class="text-gray-500 text-xs">We have to update the pricing page with the new prices.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">1</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Move FAQ</div>
<div class="text-gray-500 text-xs">Client has decied to move the FAQ section to the About page.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">5</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Branding</div>
<div class="text-gray-500 text-xs">Update the branding with the new colors.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">12</div>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-2">
<div class="flex items-center gap-2">
<div class="flex bg-yellow-500 rounded-full w-3 h-3"></div>
<div class="text-gray-700 font-bold">Review</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-gray-100 rounded-lg border-1 border-gray-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Update footer</div>
<div class="text-gray-500 text-xs">We have to update the footer with the new social media links.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">3</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Update header</div>
<div class="text-gray-500 text-xs">We have to update the header with the new logo.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">2</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Home Page bug fixes</div>
<div class="text-gray-500 text-xs">We found some bugs in the home page. List attached on ticket.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>bug</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">10</div>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-2">
<div class="flex items-center gap-2">
<div class="flex bg-green-500 rounded-full w-3 h-3"></div>
<div class="text-gray-700 font-bold">Done</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-gray-100 rounded-lg border-1 border-gray-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Update blog</div>
<div class="text-gray-500 text-xs">We have to update the blog with the new articles.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">4</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border-1 border-gray-200 p-4">
<div class="text-gray-900 font-medium mb-1">Update contact page</div>
<div class="text-gray-500 text-xs">We have to update the contact page with the new contact information.</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
<div class="text-2xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-gray-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#message-dots"></use></svg>
</div>
<div class="text-xs">2</div>
</div>
</div>
</div>
</div>
</div>
</div>
Preview
Code
Pricing plans
Try our Basic plan for 14 days. Cancel any time.
Pay montly
Pay yearly
Features
Up to 5 users
10 GB of storage each user
Basic analytics
Weekly backups
Email support
Features
Up to 20 users
50 GB of storage each user
Advanced analytics
Customizable dashboard
Daily backups
Priority email support
Features
Unlimited users
Unlimited storage
Premium analytics
Customizable dashboard
Real-time backups
Dedicated account manager
24/7 support (email and phone)
<div class="w-full h-16 px-6 flex items-center gap-4">
<a href="#" class="block text-gray-950 font-bold text-lg">Fake Corp.</a>
<div class="hidden md:flex items-center gap-3">
<a href="#" class="block font-medium text-sm text-gray-800 hover:text-gray-950 hover:underline cursor-pointer">Features</a>
<a href="#" class="block font-medium text-sm text-gray-800 hover:text-gray-950 hover:underline cursor-pointer">Products</a>
<a href="#" class="block font-medium text-sm text-gray-800 hover:text-gray-950 hover:underline cursor-pointer">Pricing</a>
<a href="#" class="block font-medium text-sm text-gray-800 hover:text-gray-950 hover:underline cursor-pointer">Contact</a>
</div>
<div class="flex items-center ml-auto">
<a href="#" class="bg-gray-950 text-white hover:bg-gray-800 cursor-pointer rounded-full text-sm font-bold px-3 py-2">
<span>Get started for free</span>
</a>
</div>
</div>
<div class="w-full py-20 px-6">
<div class="flex flex-col items-center mb-10">
<div class="text-5xl text-gray-950 font-bold text-center">Pricing plans</div>
<div class="text-gray-600 font-medium text-center">Try our Basic plan for 14 days. Cancel any time.</div>
</div>
<div class="flex items-center justify-center mb-8">
<div class="p-1 bg-gray-100 rounded-lg flex items-center gap-1 text-sm">
<div class="font-medium cursor-pointer bg-white shadow-sm rounded-md px-2 py-1">Pay montly</div>
<div class="font-medium cursor-pointer bg-transparent rounded-md px-2 py-1">Pay yearly</div>
</div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white border-1 border-gray-200 shadow-sm rounded-lg w-full">
<div class="p-6">
<div class="text-gray-950 font-bold mb-2">Basic plan</div>
<div class="w-full flex items-end gap-2 mb-4">
<div class="text-5xl text-gray-950 font-bold leading-none">$9.99</div>
<div class="text-gray-700 font-medium text-xs">
<div>Per user.</div>
<div>Per month.</div>
</div>
</div>
<div class="text-gray-700 text-sm mb-6">Access to basic features.</div>
<a href="" class="px-3 py-2 block w-full bg-gray-950 hover:bg-gray-800 text-white font-bold rounded-md text-sm text-center">
<span>Get Started</span>
</a>
</div>
<div class="w-full h-px bg-gray-200"></div>
<div class="p-6">
<div class="font-medium text-sm mb-2">Features</div>
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Up to 5 users</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">10 GB of storage each user</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Basic analytics</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Weekly backups</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Email support</div>
</div>
</div>
</div>
</div>
<div class="bg-white border-1 border-gray-200 shadow-sm rounded-lg w-full">
<div class="p-6">
<div class="text-gray-950 font-bold mb-2">Standard plan</div>
<div class="w-full flex items-end gap-2 mb-4">
<div class="text-5xl text-gray-950 font-bold leading-none">$29.99</div>
<div class="text-gray-700 font-medium text-xs">
<div>Per user.</div>
<div>Per month.</div>
</div>
</div>
<div class="text-gray-700 text-sm mb-6">Access to standard features.</div>
<a href="" class="px-3 py-2 block w-full bg-gray-950 hover:bg-gray-800 text-white font-bold rounded-md text-sm text-center">
<span>Get Started</span>
</a>
</div>
<div class="w-full h-px bg-gray-200"></div>
<div class="p-6">
<div class="font-medium text-sm mb-2">Features</div>
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Up to 20 users</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">50 GB of storage each user</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Advanced analytics</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Customizable dashboard</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Daily backups</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Priority email support</div>
</div>
</div>
</div>
</div>
<div class="bg-white border-1 border-gray-200 shadow-sm rounded-lg w-full">
<div class="p-6">
<div class="text-gray-950 font-bold mb-2">Premium Plan</div>
<div class="w-full flex items-end gap-2 mb-4">
<div class="text-5xl text-gray-950 font-bold leading-none">$49.99</div>
<div class="text-gray-700 font-medium text-xs">
<div>Per user.</div>
<div>Per month.</div>
</div>
</div>
<div class="text-gray-700 text-sm mb-6">Access to premium features.</div>
<a href="" class="px-3 py-2 block w-full bg-gray-950 hover:bg-gray-800 text-white font-bold rounded-md text-sm text-center">
<span>Get Started</span>
</a>
</div>
<div class="w-full h-px bg-gray-200"></div>
<div class="p-6">
<div class="font-medium text-sm mb-2">Features</div>
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Unlimited users</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Unlimited storage</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Premium analytics</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Customizable dashboard</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Real-time backups</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">Dedicated account manager</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-gray-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/vendor/icons.svg#check"></use></svg>
</div>
<div class="grow-1 text-sm">24/7 support (email and phone)</div>
</div>
</div>
</div>
</div>
</div>
</div>