Click to show code
<div class="w-screen h-screen bg-white sm:bg-gray-50 relative">
<div class="absolute w-full h-full hidden sm:block">
<img
loading="lazy"
class="absolute w-60 lg:w-96 bottom-0 left-0"
src="/assets/svg/login-bg-left.svg"
alt="logo"
/>
<img
loading="lazy"
class="absolute w-60 lg:w-96 bottom-0 right-0"
src="/assets/svg/login-bg-rigth.svg"
alt="logo"
/>
</div>
<div class="relative w-full sm:w-7/12 md:w-6/12 lg:w-4/12 m-auto">
<header class="pt-6 pb-2 flex justify-center">
<img
loading="lazy"
class="w-56"
src="/assets/images/logo/logo-gradient-blue-trello.png"
alt="logo"
/>
</header>
<div class="bg-white rounded shadow-none sm:shadow-lg py-4 px-6 md:px-10">
<div class="mb-4">
<h1 class="text-center font-bold pt-4 pb-8 text-gray-600">Log in to Trello</h1>
<form novalidate class="space-y-4">
<div>
<div class="relative">
<input
placeholder="Enter email"
type="email"
class="w-full rounded bg-gray-100 border-gray-300 border-2"
/>
</div>
</div>
<div>
<div class="relative">
<input
placeholder="Enter password"
type="password"
class="w-full rounded bg-gray-100 border-gray-300 border-2"
/>
</div>
</div>
<div>
<app-btn [typeBtn]="'submit'" [color]="'success'">Log In</app-btn>
</div>
</form>
</div>
<hr class="my-4 border-b-1 border-r-gray-300" />
<div
class="flex justify-center items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0 flex-col md:flex-row"
>
<a routerLink="/forgot-password" class="text-blue-600 font-light"
>Can't log in?</a
>
<span class="text-gray-500 hidden md:block">•</span>
<a routerLink="/register" class="text-blue-600 font-light"
>Sign up for an account</a
>
</div>
</div>
<hr class="mt-10 border-b-1 border-r-gray-300" />
<div class="flex justify-center">
<img
loading="lazy"
class="w-32 mt-4"
src="/assets/images/logo/logo-atlassian-gray.png"
alt="logo"
/>
</div>
</div>
</div>
Click to show code
<nav class="bg-sky-700 border-gray-200 px-6 shadow-md">
<div class="flex flex-wrap justify-between items-center">
<div class="flex items-center">
<a routerLink="/">
<img
loading="lazy"
class="w-20 mr-8"
src="/assets/images/logo/logo-gradient-white-trello.png"
alt="logo"
/>
</a>
<div class="flex items-center">
<ul class="flex items-center space-x-2 text-sm font-medium">
<li>
<a
class="block py-3 px-4 text-white"
>Workspaces</a
>
</li>
<li>
<a
class="block py-3 px-4 text-white"
>Recent</a
>
</li>
<li>
<app-btn typeBtn="button" color="sky">Create</app-btn>
</li>
</ul>
</div>
</div>
<div class="flex items-center">
<button
type="button"
class="flex rounded-full"
aria-expanded="false"
type="button"
>
<img
class="w-8 h-8 rounded-full"
src="https://api.lorem.space/image/face?w=400&h=400"
alt="user photo"
/>
</button>
</div>
</div>
</nav>
Click to show code
<div
class="z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow"
>
<div class="py-3 px-4">
<span class="block text-sm text-gray-900 "
>Bonnie Green</span
>
<span
class="block text-sm font-medium text-gray-500 truncate "
>[email protected]</span
>
</div>
<ul class="py-1" aria-labelledby="user-menu-button">
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>Dashboard</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 "
>Settings</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 "
>Earnings</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 "
>Sign out</a
>
</li>
</ul>
</div>
Click to show code
<div
class="z-50 my-4 w-60 text-base list-none bg-white rounded divide-y divide-gray-100 shadow"
>
<div class="py-3 px-4 flex justify-between">
<span class="block text-sm text-center text-gray-900">Account</span>
<button (click)="isOpen = !isOpen" class="block text-sm text-gray-900">
<fa-icon [icon]="faClose"></fa-icon>
</button>
</div>
<div class="py-3 px-4 flex items-center space-x-4">
<img
class="w-10 h-10 rounded-full"
src="https://api.lorem.space/image/face?w=400&h=400"
alt=""
/>
<div class="space-y-1">
<div>Jese Leos</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
<ul class="py-1" >
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>Profile</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>Activity</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>Cards</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>Settings</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>Sign out</a
>
</li>
</ul>
<ul class="py-1">
<li>
<a
href="#"
class="block py-2 px-4 text-sm text-gray-700"
>Log out</a
>
</li>
</ul>
</div>
Click to show code
<app-navbar></app-navbar>
<div class="container mx-auto flex mt-10">
<div class="w-1/5 mr-4">
<ul class="flex flex-col font-medium text-gray-700">
<li>
<a class="block bg-sky-100 rounded py-1 px-3 text-sky-700"
><fa-icon [icon]="faTrello"></fa-icon> Boards</a
>
</li>
<li>
<a class="block py-1 px-3"
><fa-icon [icon]="faBox"></fa-icon> Templates</a
>
</li>
<li>
<a class="block py-1 px-3"
><fa-icon [icon]="faWaveSquare"></fa-icon> Home</a
>
</li>
</ul>
</div>
<div class="w-full">
<h1 class="text-lg font-bold mb-4"><fa-icon [icon]="faClock"></fa-icon> Recently viewed</h1>
<div class="grid grid-cols-4 gap-4">
<div class="w-full bg-sky-700 px-4 py-2 rounded text-white font-bold h-24">Board 1</div>
<div class="w-full bg-green-700 px-4 py-2 rounded text-white font-bold h-24">Board 1</div>
<div class="w-full bg-amber-700 px-4 py-2 rounded text-white font-bold h-24">Board 1</div>
<div class="w-full bg-indigo-700 px-4 py-2 rounded text-white font-bold h-24">Board 1</div>
</div>
</div>
</div>
Click to show code
<button
class="w-full py-1 px-2 flex justify-between items-center"
type="button"
(click)="accordionMenu.toggle()"
>
My Workspace
<fa-icon
[icon]="accordionMenu.expanded ? faAngleUp : faAngleDown"
></fa-icon>
</button>
<div
[ngClass]="{
hidden: !accordionMenu.expanded,
block: accordionMenu.expanded
}"
>
<ul class="ml-2 flex flex-col text-sm text-gray-700">
<li>
<a class="block py-1 px-3"
><fa-icon [icon]="faTrello"></fa-icon> Boards</a
>
</li>
<li>
<a class="block py-1 px-3"
><fa-icon [icon]="faHeart"></fa-icon> Highlights</a
>
</li>
<li>
<a class="block py-1 px-3"
><fa-icon [icon]="faBorderAll"></fa-icon> Views</a
>
</li>
<li>
<a class="block py-1 px-3"
><fa-icon [icon]="faUsers"></fa-icon> Members</a
>
</li>
<li>
<a class="block py-1 px-3"
><fa-icon [icon]="faGear"></fa-icon> Settings</a
>
</li>
</ul>
</div>
Click to show code
<div class="flex flex-col h-screen">
<app-navbar></app-navbar>
<div class="w-full grow bg-sky-600 px-4 pb-4">
<div>
<h2 class="text-xl font-bold text-white my-4">Demo Board</h2>
</div>
<div class="flex items-start w-full h-full">
<div class="rounded bg-gray-200 w-72 p-2 mr-3">
<div class="flex justify-between py-1">
<h3 class="text-sm font-bold ml-2">To Do</h3>
</div>
<div class="text-sm mt-2">
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 1
</div>
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 2
</div>
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 3
</div>
</div>
</div>
<div class="rounded bg-gray-200 w-72 p-2 mr-3">
<div class="flex justify-between py-1">
<h3 class="text-sm font-bold ml-2">Doing</h3>
</div>
<div class="text-sm mt-2">
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 1
</div>
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 2
</div>
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 3
</div>
</div>
</div>
<div class="rounded bg-gray-200 w-72 p-2 mr-3">
<div class="flex justify-between py-1">
<h3 class="text-sm font-bold ml-2">Done</h3>
</div>
<div class="text-sm mt-2">
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 1
</div>
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 2
</div>
<div
class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
>
Task 3
</div>
</div>
</div>
</div>
</div>
</div><div class="p-6 bg-gray-100 relative rounded shadow">
<button type="button" class="absolute top-3 right-3 focus:outline-none p-2">
<fa-icon [icon]="faClose"></fa-icon>
</button>
<div class="flex space-x-2 mb-5">
<fa-icon class="text-gray-800" [icon]="faCheckToSlot"></fa-icon>
<div class="flex flex-col">
<h3 class="text-lg font-semibold text-gray-800">Task 1</h3>
<p class="text-sm text-gray-500">in list ToDo</p>
</div>
</div>
<div class="flex w-full gap-4">
<div class="flex space-x-2 mb-5 w-4/6">
<fa-icon class="text-gray-800" [icon]="faBars"></fa-icon>
<div class="flex flex-col">
<h3 class="text-lg font-semibold text-gray-800">Description</h3>
<p class="text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, hic? Adipisci soluta cum odio, beatae ratione magni nobis, optio similique rerum minus excepturi sed vel, id voluptatibus repellendus numquam quod.</p>
</div>
</div>
<div class="flex flex-auto space-y-2 flex-col">
<app-btn typeBtn="button" color="gray-light">
<fa-icon class="text-gray-800" [icon]="faUser"></fa-icon>
Members
</app-btn>
<app-btn typeBtn="button" color="gray-light">
<fa-icon class="text-gray-800" [icon]="faTag"></fa-icon>
Labels
</app-btn>
<app-btn typeBtn="button" color="gray-light">
<fa-icon class="text-gray-800" [icon]="faCheckSquare"></fa-icon>
Checklist
</app-btn>
<app-btn typeBtn="button" color="gray-light">
<fa-icon class="text-gray-800" [icon]="faClock"></fa-icon>
Dates
</app-btn>
</div>
</div>
</div><div class="flex flex-col h-screen">
<app-navbar></app-navbar>
<div class="w-full grow bg-sky-600 px-4 pb-4">
<div class="flex gap-4">
<div class="w-1/2">
<h1 class="text-white">List A</h1>
<div class="h-64 w-full border overflow-y-auto bg-white rounded mt-2">
<div class="flex items-center space-x-4 p-2">
<img class="w-10 h-10 rounded-full" src="https://api.lorem.space/image/fashion?w=150&h=150" alt="" />
<div class="space-y-1 font-medium dark:text-white">
<div>Product 1</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
$ 2000
</div>
</div>
</div>
<div class="flex items-center space-x-4 p-2">
<img class="w-10 h-10 rounded-full" src="https://api.lorem.space/image/fashion?w=150&h=150" alt="" />
<div class="space-y-1 font-medium dark:text-white">
<div>Product 1</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
$ 2000
</div>
</div>
</div>
</div>
</div>
<div class="w-1/2">
<h1 class="text-white">List B</h1>
</div>
</div>
</div>
</div>