lowcss.
0.25.0
<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-neutral-950 mb-0">Create an account</div>
<div class="text-sm text-neutral-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 border-neutral-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 border-neutral-200 px-3 py-2 text-sm rounded-md outline-neutral-950" placeholder="******" />
<div class="text-2xs text-neutral-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-neutral-950 hover:bg-neutral-800 text-white cursor-pointer rounded-md w-full shadow-sm">
Create Account
</button>
</div>
<div class="text-center text-xs">
<span class="text-neutral-800">Already have an account?</span>
<a href="#" class="text-neutral-950 hover:underline font-bold">Log in</a>
</div>
</div>
</div>
<div class="bg-neutral-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>
| 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 |
<div class="w-full">
<div class="w-full flex items-center gap-4 h-16 border-b border-neutral-200 px-6">
<a href="#" class="flex items-center gap-1 text-neutral-950">
<div class="flex items-center text-2xl">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-950">Overview</a>
<a href="#" class="text-sm font-medium text-neutral-700 hover:text-neutral-950">Products</a>
<a href="#" class="text-sm font-medium text-neutral-700 hover:text-neutral-950">Orders</a>
<a href="#" class="text-sm font-medium text-neutral-700 hover:text-neutral-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 border-neutral-200 h-8 w-8 cursor-pointer text-neutral-900 text-lg bg-white">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#user"></use></svg>
</button>
<div class="absolute hidden group-focus-within:block top-full right-0 mt-1">
<div class="border border-neutral-200 p-1 rounded-lg bg-white text-sm shadow-sm w-40 select-none">
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Profile</a>
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Settings</a>
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Contact Support</a>
<div class="w-full h-px bg-neutral-200 my-1"></div>
<a class="flex items-center hover:bg-neutral-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-neutral-950 mb-1">
Welcome back, <span class="font-bold">Bob</span>.
</div>
<div class="text-neutral-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-neutral-950 hover:bg-neutral-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 border-neutral-200 rounded-lg p-6 shadow-sm">
<div class="text-neutral-950 text-sm font-medium mb-1">Total Sales</div>
<div class="text-neutral-950 text-2xl font-bold mb-0">$ 1,234,567</div>
<div class="text-neutral-600 text-xs">+12% from last month.</div>
</div>
<div class="w-full border border-neutral-200 rounded-lg p-6 shadow-sm">
<div class="text-neutral-950 text-sm font-medium mb-1">Total Orders</div>
<div class="text-neutral-950 text-2xl font-bold mb-0">123,456</div>
<div class="text-neutral-600 text-xs">+30% from last month.</div>
</div>
<div class="w-full border border-neutral-200 rounded-lg p-6 shadow-sm">
<div class="text-neutral-950 text-sm font-medium mb-1">Subscriptions</div>
<div class="text-neutral-950 text-2xl font-bold mb-0">123,456</div>
<div class="text-neutral-600 text-xs">+10% from last month.</div>
</div>
<div class="w-full border border-neutral-200 rounded-lg p-6 shadow-sm">
<div class="text-neutral-950 text-sm font-medium mb-1">Visitors</div>
<div class="text-neutral-950 text-2xl font-bold mb-0">87,654,321</div>
<div class="text-neutral-600 text-xs">+15% from last month.</div>
</div>
</div>
<div class="w-full">
<div class="text-xl text-neutral-950 font-bold mb-2">Recent orders</div>
<div class="rounded-lg border border-neutral-200 mb-4 w-full overflow-y-auto">
<table class="w-full text-sm">
<thead class="border-b border-neutral-200">
<tr class="">
<th class="h-10 px-2 text-left align-middle font-medium">
<input type="checkbox" class="rounded-md border border-neutral-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 border-neutral-200 hover:bg-neutral-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border border-neutral-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 border-neutral-200 hover:bg-neutral-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border border-neutral-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 border-neutral-200 hover:bg-neutral-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border border-neutral-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 border-neutral-200 hover:bg-neutral-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border border-neutral-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-neutral-50">
<td class="p-2 align-middle">
<input type="checkbox" class="rounded-md border border-neutral-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-neutral-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 border-neutral-200 w-8 h-8 p-0 text-lg bg-white cursor-not-allowed opacity-50">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevrons-left"></use></svg>
</button>
<button class="flex items-center justify-center rounded-md border border-neutral-200 w-8 h-8 p-0 text-lg bg-white cursor-not-allowed opacity-50">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-left"></use></svg>
</button>
<div class="text-xs text-neutral-900 mx-2 font-medium">Page 1 of 100</div>
<button class="flex items-center justify-center rounded-md border border-neutral-200 w-8 h-8 p-0 text-lg bg-white hover:bg-neutral-50 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-right"></use></svg>
</button>
<button class="flex items-center justify-center rounded-md border border-neutral-200 w-8 h-8 p-0 text-lg bg-white hover:bg-neutral-50 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevrons-right"></use></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-4 bg-neutral-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 border-neutral-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-neutral-950 rounded-full py-3 text-2xl mb-4">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#kanban"></use></svg>
</a>
<a class="flex items-center justify-center text-neutral-800 hover:text-neutral-950 hover:bg-neutral-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#home"></use></svg>
</a>
<a class="flex items-center justify-center text-neutral-800 hover:text-neutral-950 hover:bg-neutral-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#layout"></use></svg>
</a>
<a class="flex items-center justify-center text-neutral-800 hover:text-neutral-950 hover:bg-neutral-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#folder"></use></svg>
</a>
<a class="flex items-center justify-center text-neutral-800 hover:text-neutral-950 hover:bg-neutral-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-800 hover:text-neutral-950 hover:bg-neutral-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-700 hover:text-neutral-900 cursor-pointer hover:underline">Projects</div>
<div class="text-neutral-500">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-right"></use></svg>
</div>
<div class="text-neutral-700 hover:text-neutral-900 cursor-pointer hover:underline">ABCD Corp.</div>
<div class="text-neutral-500">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-right"></use></svg>
</div>
<div class="text-neutral-950">Website</div>
</div>
<div class="relative group">
<button class="flex items-center justify-center rounded-full border border-neutral-200 h-8 w-8 cursor-pointer text-neutral-900 text-lg bg-white">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#user"></use></svg>
</button>
<div class="absolute hidden group-focus-within:block top-full right-0 mt-1">
<div class="border border-neutral-200 p-1 rounded-lg bg-white text-sm shadow-sm w-40 select-none">
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Profile</a>
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Settings</a>
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Contact Support</a>
<div class="w-full h-px bg-neutral-200 my-1"></div>
<a class="flex items-center hover:bg-neutral-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-neutral-950 text-2xl font-bold">Website</div>
<div class="text-neutral-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-neutral-100 rounded-lg border border-neutral-200">
<div class="bg-white text-neutral-900 font-medium text-xs px-2 py-1 rounded-md shadow-sm">Kanban</div>
<div class="cursor-pointer hover:bg-white text-neutral-700 text-xs px-2 py-1 rounded-md">List</div>
<div class="cursor-pointer hover:bg-white text-neutral-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-neutral-500 text-base px-2 py-2">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#search"></use></svg>
</div>
<input type="text" class="border-0 bg-white py-1 pr-2 pl-8 border border-neutral-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-neutral-100 text-900 rounded-lg px-3 py-1 border border-neutral-200 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-100 text-900 rounded-lg px-3 py-1 border border-neutral-200 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-500 rounded-full w-3 h-3"></div>
<div class="text-neutral-700 font-bold">To Do</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-neutral-100 rounded-lg border border-neutral-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Redesign About</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">3</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Refactor main components</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-700 font-bold">In Progress</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-neutral-100 rounded-lg border border-neutral-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Create new landing page</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">2</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Update pricing page</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">1</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Move FAQ</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">5</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Branding</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-700 font-bold">Review</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-neutral-100 rounded-lg border border-neutral-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Update footer</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">3</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Update header</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">2</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Home Page bug fixes</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>bug</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.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-neutral-700 font-bold">Done</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-neutral-100 rounded-lg border border-neutral-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Update blog</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
<div class="text-2xs bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>marketing</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">4</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">Update contact page</div>
<div class="text-neutral-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-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>design</span>
</div>
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-16 px-6 flex items-center gap-4">
<a href="#" class="block text-neutral-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-neutral-800 hover:text-neutral-950 hover:underline cursor-pointer">Features</a>
<a href="#" class="block font-medium text-sm text-neutral-800 hover:text-neutral-950 hover:underline cursor-pointer">Products</a>
<a href="#" class="block font-medium text-sm text-neutral-800 hover:text-neutral-950 hover:underline cursor-pointer">Pricing</a>
<a href="#" class="block font-medium text-sm text-neutral-800 hover:text-neutral-950 hover:underline cursor-pointer">Contact</a>
</div>
<div class="flex items-center ml-auto">
<a href="#" class="bg-neutral-950 text-white hover:bg-neutral-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-neutral-950 font-bold text-center">Pricing plans</div>
<div class="text-neutral-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-neutral-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 border-neutral-200 shadow-sm rounded-lg w-full">
<div class="p-6">
<div class="text-neutral-950 font-bold mb-2">Basic plan</div>
<div class="w-full flex items-end gap-2 mb-4">
<div class="text-5xl text-neutral-950 font-bold leading-none">$9.99</div>
<div class="text-neutral-700 font-medium text-xs">
<div>Per user.</div>
<div>Per month.</div>
</div>
</div>
<div class="text-neutral-700 text-sm mb-6">Access to basic features.</div>
<a href="" class="px-3 py-2 block w-full bg-neutral-950 hover:bg-neutral-800 text-white font-bold rounded-md text-sm text-center">
<span>Get Started</span>
</a>
</div>
<div class="w-full h-px bg-neutral-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-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Up to 5 users</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">10 GB of storage each user</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Basic analytics</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Weekly backups</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Email support</div>
</div>
</div>
</div>
</div>
<div class="bg-white border border-neutral-200 shadow-sm rounded-lg w-full">
<div class="p-6">
<div class="text-neutral-950 font-bold mb-2">Standard plan</div>
<div class="w-full flex items-end gap-2 mb-4">
<div class="text-5xl text-neutral-950 font-bold leading-none">$29.99</div>
<div class="text-neutral-700 font-medium text-xs">
<div>Per user.</div>
<div>Per month.</div>
</div>
</div>
<div class="text-neutral-700 text-sm mb-6">Access to standard features.</div>
<a href="" class="px-3 py-2 block w-full bg-neutral-950 hover:bg-neutral-800 text-white font-bold rounded-md text-sm text-center">
<span>Get Started</span>
</a>
</div>
<div class="w-full h-px bg-neutral-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-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Up to 20 users</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">50 GB of storage each user</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Advanced analytics</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Customizable dashboard</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Daily backups</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Priority email support</div>
</div>
</div>
</div>
</div>
<div class="bg-white border border-neutral-200 shadow-sm rounded-lg w-full">
<div class="p-6">
<div class="text-neutral-950 font-bold mb-2">Premium Plan</div>
<div class="w-full flex items-end gap-2 mb-4">
<div class="text-5xl text-neutral-950 font-bold leading-none">$49.99</div>
<div class="text-neutral-700 font-medium text-xs">
<div>Per user.</div>
<div>Per month.</div>
</div>
</div>
<div class="text-neutral-700 text-sm mb-6">Access to premium features.</div>
<a href="" class="px-3 py-2 block w-full bg-neutral-950 hover:bg-neutral-800 text-white font-bold rounded-md text-sm text-center">
<span>Get Started</span>
</a>
</div>
<div class="w-full h-px bg-neutral-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-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Unlimited users</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Unlimited storage</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Premium analytics</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Customizable dashboard</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Real-time backups</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">Dedicated account manager</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center text-neutral-950 text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#check"></use></svg>
</div>
<div class="grow text-sm">24/7 support (email and phone)</div>
</div>
</div>
</div>
</div>
</div>
</div>