init
This commit is contained in:
@@ -0,0 +1,452 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!--
|
||||
This example uses a custom `light-blue` color which isn't included by default. If you'd like to try this example
|
||||
exactly as it is, add these custom colors to your `tailwind.config.js` file:
|
||||
|
||||
```
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
// ...
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'light-blue': {
|
||||
'50': '#f0f9ff',
|
||||
'100': '#e0f2fe',
|
||||
'200': '#bae6fd',
|
||||
'300': '#7dd3fc',
|
||||
'400': '#38bdf8',
|
||||
'500': '#0ea5e9',
|
||||
'600': '#0284c7',
|
||||
'700': '#0369a1',
|
||||
'800': '#075985',
|
||||
'900': '#0c4a6e',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div>
|
||||
<div class="relative bg-light-blue-700 pb-32 overflow-hidden">
|
||||
<!-- On: "bg-light-blue-900", Off: "bg-transparent" -->
|
||||
<nav class="relative z-10 border-b border-teal-500 border-opacity-25 lg:bg-transparent lg:border-none">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
|
||||
<div class="relative h-16 flex items-center justify-between lg:border-b lg:border-light-blue-800">
|
||||
<div class="px-2 flex items-center lg:px-0">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="block h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-teal-400.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="hidden lg:block lg:ml-6 lg:space-x-4">
|
||||
<div class="flex">
|
||||
<a href="#" class="rounded-md py-2 px-3 bg-black bg-opacity-25 text-sm leading-5 font-medium text-white focus:outline-none focus:bg-light-blue-800 transition duration-150 ease-in-out" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 text-sm leading-5 font-medium text-white hover:bg-light-blue-800 focus:outline-none focus:bg-light-blue-800 transition duration-150 ease-in-out">Jobs</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 text-sm leading-5 font-medium text-white hover:bg-light-blue-800 focus:outline-none focus:bg-light-blue-800 transition duration-150 ease-in-out">Applicants</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 text-sm leading-5 font-medium text-white hover:bg-light-blue-800 focus:outline-none focus:bg-light-blue-800 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 px-2 flex justify-center lg:ml-6 lg:justify-end">
|
||||
<div class="max-w-lg w-full lg:max-w-xs">
|
||||
<label for="search" class="sr-only">Search</label>
|
||||
<div class="relative text-light-blue-100 focus-within:text-gray-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<!-- Heroicon name: search -->
|
||||
<svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<input id="search" class="block w-full bg-light-blue-700 bg-opacity-50 py-2 pl-10 pr-3 border border-transparent rounded-md leading-5 placeholder-light-blue-100 focus:outline-none focus:bg-white focus:placeholder-gray-500 focus:text-gray-900 sm:text-sm transition duration-150 ease-in-out" placeholder="Search" type="search" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button class="p-2 rounded-md inline-flex items-center justify-center text-light-blue-200 hover:text-white hover:bg-light-blue-800 focus:outline-none focus:bg-light-blue-800 focus:text-white transition duration-150 ease-in-out" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!-- Icon when menu is closed. -->
|
||||
<!--
|
||||
Heroicon name: menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block flex-shrink-0 h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open. -->
|
||||
<!--
|
||||
Heroicon name: x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden flex-shrink-0 h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:block lg:ml-4">
|
||||
<div class="flex items-center">
|
||||
<button class="flex-shrink-0 border-2 border-transparent rounded-full p-1 text-light-blue-200 hover:bg-light-blue-800 hover:text-white focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="relative flex-shrink-0 ml-4">
|
||||
<div>
|
||||
<button class="rounded-full flex text-sm text-white focus:outline-none focus:shadow-solid transition duration-150 ease-in-out" id="user-menu" aria-haspopup="true">
|
||||
<span class="sr-only">Open profile menu</span>
|
||||
<img class="rounded-full h-8 w-8" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
Profile dropdown panel, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
|
||||
<div class="py-1 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
|
||||
<a href="#" class="block py-2 px-4 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Your Profile</a>
|
||||
|
||||
<a href="#" class="block py-2 px-4 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Settings</a>
|
||||
|
||||
<a href="#" class="block py-2 px-4 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, toggle classes based on menu state.
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<div class="bg-light-blue-900 hidden lg:hidden">
|
||||
<div class="pt-2 pb-3 px-2 space-y-1">
|
||||
<a href="#" class="block rounded-md py-2 px-3 bg-black bg-opacity-25 text-base font-medium text-white focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">Dashboard</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-light-blue-800 focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">Jobs</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-light-blue-800 focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">Applicants</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-light-blue-800 focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-light-blue-800">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="rounded-full h-10 w-10" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80h" alt="" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium leading-6 text-white">Debbie Lewis</div>
|
||||
<div class="text-sm font-medium leading-5 text-light-blue-200">debbielewis@example.com</div>
|
||||
</div>
|
||||
<button class="ml-auto flex-shrink-0 border-2 border-transparent rounded-full p-1 text-light-blue-200 hover:bg-light-blue-800 hover:text-white focus:outline-none focus:text-white focus:bg-light-blue-700 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">Notifications</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2">
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-light-blue-200 hover:text-white hover:bg-light-blue-800 focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">Your Profile</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-light-blue-200 hover:text-white hover:bg-light-blue-800 focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">Settings</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-light-blue-200 hover:text-white hover:bg-light-blue-800 focus:outline-none focus:text-white focus:bg-light-blue-800 transition duration-150 ease-in-out">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- On: "bottom-0", Off: "inset-y-0" -->
|
||||
<div class="absolute flex justify-center inset-x-0 left-1/2 transform -translate-x-1/2 w-full overflow-hidden lg:inset-y-0" aria-hidden="true">
|
||||
<div class="flex-grow bg-light-blue-900 bg-opacity-75"></div>
|
||||
<svg class="flex-shrink-0" width="1750" height="308" viewBox="0 0 1750 308" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity=".75" d="M1465.84 308L16.816 0H1750v308h-284.16z" fill="#075985" />
|
||||
<path opacity=".75" d="M1733.19 0L284.161 308H0V0h1733.19z" fill="#0c4a6e" />
|
||||
</svg>
|
||||
<div class="flex-grow bg-light-blue-800 bg-opacity-75"></div>
|
||||
</div>
|
||||
<header class="relative py-10">
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl leading-9 font-bold text-white">
|
||||
Settings
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
<main class="relative -mt-32">
|
||||
<div class="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
|
||||
<aside class="py-6 lg:col-span-3">
|
||||
<nav>
|
||||
<a href="#" class="group bg-teal-50 border-l-4 border-teal-500 px-3 py-2 flex items-center text-sm leading-5 font-medium text-teal-700 hover:bg-teal-50 hover:text-teal-700 focus:outline-none focus:bg-teal-100 focus:text-teal-700 transition ease-in-out duration-150" aria-current="page">
|
||||
<!-- Heroicon name: user-circle -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-teal-500 group-hover:text-teal-500 group-focus:text-teal-600 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Profile
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group mt-1 border-l-4 border-transparent px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Account
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group mt-1 border-l-4 border-transparent px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: key -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Password
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group mt-1 border-l-4 border-transparent px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Notifications
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group mt-1 border-l-4 border-transparent px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: credit-card -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Billing
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group mt-1 border-l-4 border-transparent px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid-add -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Integrations
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<form class="divide-y divide-gray-200 lg:col-span-9" action="#" method="POST">
|
||||
<!-- Profile section -->
|
||||
<div class="py-6 px-4 space-y-6 sm:p-6 lg:pb-8">
|
||||
<div>
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Profile</h2>
|
||||
<p class="mt-1 text-sm leading-5 text-gray-500">
|
||||
This information will be displayed publicly so be careful what you share.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-6 lg:flex-row lg:space-y-0 lg:space-x-6">
|
||||
<div class="flex-grow space-y-6">
|
||||
<div class="space-y-1">
|
||||
<label for="username" class="block text-sm font-medium leading-5 text-gray-700">
|
||||
Username
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm flex">
|
||||
<span class="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm">
|
||||
workcation.com/
|
||||
</span>
|
||||
<input id="username" class="form-input flex-grow block w-full min-w-0 rounded-none rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5" value="lisamarie" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="about" class="block text-sm leading-5 font-medium text-gray-700">
|
||||
About
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<textarea id="about" rows="3" class="form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Brief description for your profile. URLs are hyperlinked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
|
||||
<p class="block text-sm leading-5 font-medium text-gray-700" aria-hidden="true">
|
||||
Photo
|
||||
</p>
|
||||
<div class="lg:hidden">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true">
|
||||
<img class="rounded-full h-full w-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80h" alt="" />
|
||||
</div>
|
||||
<div class="ml-5 rounded-md shadow-sm">
|
||||
<div class="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center focus-within:border-blue-300 focus-within:shadow-outline-blue focus-within:text-gray-900 transition duration-150 ease-in-out">
|
||||
<label for="user_photo" class="relative text-sm leading-4 font-medium text-gray-700 group-hover:text-gray-500 transition duration-150 ease-in-out pointer-events-none">
|
||||
<span>Change</span>
|
||||
<span class="sr-only"> user photo</span>
|
||||
</label>
|
||||
<input id="user_photo" type="file" class="absolute w-full h-full opacity-0 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden relative rounded-full overflow-hidden lg:block transition duration-150 ease-in-out">
|
||||
<img class="relative rounded-full w-40 h-40" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=320&h=320&q=80" alt="" />
|
||||
<label class="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm leading-5 font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100 transition duration-150 ease-in-out">
|
||||
<span>Change</span>
|
||||
<span class="sr-only"> user photo</span>
|
||||
<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<label for="first_name" class="block text-sm font-medium leading-5 text-gray-700">First name</label>
|
||||
<input id="first_name" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<label for="last_name" class="block text-sm font-medium leading-5 text-gray-700">Last name</label>
|
||||
<input id="last_name" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12">
|
||||
<label for="url" class="block text-sm font-medium leading-5 text-gray-700">URL</label>
|
||||
<input id="url" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<label for="company" class="block text-sm font-medium leading-5 text-gray-700">Company</label>
|
||||
<input id="company" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy section -->
|
||||
<div class="pt-6 space-y-4 divide-y divide-gray-200">
|
||||
<div class="px-4 space-y-2 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Privacy</h2>
|
||||
<p class="mt-1 text-sm leading-5 text-gray-500">
|
||||
Ornare eu a volutpat eget vulputate. Fringilla commodo amet.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li class="py-4 flex items-center justify-between space-x-4">
|
||||
<div class="flex flex-col">
|
||||
<p id="privacy-option-label-1" class="text-sm leading-5 font-medium text-gray-900">
|
||||
Available to hire
|
||||
</p>
|
||||
<p id="privacy-option-description-1" class="text-sm leading-5 text-gray-500">
|
||||
Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.
|
||||
</p>
|
||||
</div>
|
||||
<!-- On: "bg-teal-500", Off: "bg-gray-200" -->
|
||||
<span role="checkbox" tabindex="0" aria-checked="true" aria-labelledby="privacy-option-label-1" aria-describedby="privacy-option-description-1" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="py-4 flex items-center justify-between space-x-4">
|
||||
<div class="flex flex-col">
|
||||
<p id="privacy-option-label-2" class="text-sm leading-5 font-medium text-gray-900">
|
||||
Make account private
|
||||
</p>
|
||||
<p id="privacy-option-description-2" class="text-sm leading-5 text-gray-500">
|
||||
Pharetra morbi dui mi mattis tellus sollicitudin cursus pharetra.
|
||||
</p>
|
||||
</div>
|
||||
<!-- On: "bg-teal-500", Off: "bg-gray-200" -->
|
||||
<span role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="privacy-option-label-2" aria-describedby="privacy-option-description-2" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="py-4 flex items-center justify-between space-x-4">
|
||||
<div class="flex flex-col">
|
||||
<p id="privacy-option-label-3" class="text-sm leading-5 font-medium text-gray-900">
|
||||
Allow commenting
|
||||
</p>
|
||||
<p id="privacy-option-description-3" class="text-sm leading-5 text-gray-500">
|
||||
Integer amet, nunc hendrerit adipiscing nam. Elementum ame
|
||||
</p>
|
||||
</div>
|
||||
<!-- On: "bg-teal-500", Off: "bg-gray-200" -->
|
||||
<span role="checkbox" tabindex="0" aria-checked="true" aria-labelledby="privacy-option-label-3" aria-describedby="privacy-option-description-3" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="py-4 flex items-center justify-between space-x-4">
|
||||
<div class="flex flex-col">
|
||||
<p id="privacy-option-label-4" class="text-sm leading-5 font-medium text-gray-900">
|
||||
Allow mentions
|
||||
</p>
|
||||
<p id="privacy-option-description-4" class="text-sm leading-5 text-gray-500">
|
||||
Adipiscing est venenatis enim molestie commodo eu gravid
|
||||
</p>
|
||||
</div>
|
||||
<!-- On: "bg-teal-500", Off: "bg-gray-200" -->
|
||||
<span role="checkbox" tabindex="0" aria-checked="true" aria-labelledby="privacy-option-label-4" aria-describedby="privacy-option-description-4" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="py-4 px-4 flex justify-end space-x-5 sm:px-6">
|
||||
<div class="inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="bg-white border border-gray-300 rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-light-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="inline-flex rounded-md shadow-sm">
|
||||
<button type="submit" class="bg-light-blue-700 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-light-blue-600 focus:outline-none focus:border-light-blue-800 focus:shadow-outline-blue active:bg-light-blue-800 transition duration-150 ease-in-out">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,322 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#application-ui" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Application UI
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#application-ui-page-examples" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Examples
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Settings Screens
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-7bd5da08d9b0375f30c7a2433c8aae8a40f97f7a" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-7bd5da08d9b0375f30c7a2433c8aae8a40f97f7a">Brand nav with overlap and sidebar form</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/page-examples/settings-screens/brand_nav_with_overlap_and_sidebar_form.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-670558dfe43b32de12b6da53f0fa5d5645d03428" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-670558dfe43b32de12b6da53f0fa5d5645d03428">With breadcrumbs and centered form</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/page-examples/settings-screens/with_breadcrumbs_and_centered_form.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-cba597e40b8d0ab84311ee323ad09d518079c9cb" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-cba597e40b8d0ab84311ee323ad09d518079c9cb">With sidebar navigation and constrained content area</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/page-examples/settings-screens/with_sidebar_navigation_and_constrained_content_area.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-8e95a65c2623c3233d57a13d7f6dc839cdfb8551" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-8e95a65c2623c3233d57a13d7f6dc839cdfb8551">With sidebar navigation and two-column form</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/page-examples/settings-screens/with_sidebar_navigation_and_two_column_form.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,379 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!--
|
||||
This example uses a custom `light-blue` color which isn't included by default. If you'd like to try this example
|
||||
exactly as it is, add these custom colors to your `tailwind.config.js` file:
|
||||
|
||||
```
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
// ...
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'light-blue': {
|
||||
'50': '#f0f9ff',
|
||||
'100': '#e0f2fe',
|
||||
'200': '#bae6fd',
|
||||
'300': '#7dd3fc',
|
||||
'400': '#38bdf8',
|
||||
'500': '#0ea5e9',
|
||||
'600': '#0284c7',
|
||||
'700': '#0369a1',
|
||||
'800': '#075985',
|
||||
'900': '#0c4a6e',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
--><html>
|
||||
<head /><body>
|
||||
<nav class="bg-light-blue-500" aria-label="Global">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center px-2 lg:px-0">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-white.svg" alt="Workflow logo" />
|
||||
</div>
|
||||
<div class="hidden lg:ml-8 lg:flex lg:space-x-4">
|
||||
<a href="#" class="rounded-md py-2 px-3 text-sm font-medium leading-5 text-white hover:bg-light-blue-400 focus:outline-none focus:bg-light-blue-400 transition duration-150 ease-in-out">
|
||||
Dashboard
|
||||
</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 text-sm font-medium leading-5 text-white hover:bg-light-blue-400 focus:outline-none focus:bg-light-blue-400 transition duration-150 ease-in-out">
|
||||
Jobs
|
||||
</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 text-sm font-medium leading-5 text-white hover:bg-light-blue-400 focus:outline-none focus:bg-light-blue-400 transition duration-150 ease-in-out">
|
||||
Applicants
|
||||
</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 text-sm font-medium leading-5 text-white hover:bg-light-blue-400 focus:outline-none focus:bg-light-blue-400 transition duration-150 ease-in-out">
|
||||
Company
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center px-2 lg:ml-6 lg:justify-end">
|
||||
<div class="max-w-lg w-full lg:max-w-xs">
|
||||
<label for="search" class="sr-only">Search</label>
|
||||
<div class="relative text-white focus-within:text-gray-400">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<!-- Heroicon name: search -->
|
||||
<svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<input id="search" class="block w-full bg-light-blue-400 border border-transparent rounded-md py-2 pl-10 pr-3 text-base leading-5 placeholder-white focus:outline-none focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 sm:text-sm transition duration-150 ease-in-out" placeholder="Search" type="search" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button class="inline-flex items-center justify-center p-2 rounded-md text-light-blue-200 hover:text-white hover:bg-light-blue-400 focus:outline-none focus:bg-light-blue-400 focus:text-white transition duration-150 ease-in-out" aria-expanded="false">
|
||||
<span class="sr-only">Open menu</span>
|
||||
<!-- Icon when menu is closed. -->
|
||||
<!--
|
||||
Heroicon name: menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open. -->
|
||||
<!--
|
||||
Heroicon name: x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:ml-4 lg:flex lg:items-center">
|
||||
<button class="flex-shrink-0 p-1 border-2 border-transparent text-light-blue-200 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">Notificaitons</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-4 relative flex-shrink-0">
|
||||
<div>
|
||||
<button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-light-blue-300 transition duration-150 ease-in-out" id="user-menu" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
Profile dropdown panel, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
|
||||
<div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Your Profile</a>
|
||||
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Settings</a>
|
||||
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, toggle classes based on menu state.
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<div class="hidden lg:hidden">
|
||||
<div class="pt-2 pb-3 px-2 space-y-1">
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-light-blue-400 focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">Dashboard</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-light-blue-400 focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">Jobs</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-light-blue-400 focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">Applicants</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-light-blue-400 focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-light-blue-500">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80" alt="" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium leading-6 text-white">Tom Cook</div>
|
||||
<div class="text-sm font-medium leading-5 text-light-blue-200">tom@example.com</div>
|
||||
</div>
|
||||
<button class="ml-auto flex-shrink-0 border-2 border-transparent rounded-full p-1 text-light-blue-200 hover:text-white focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">Notifications</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2">
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-light-blue-200 hover:text-white hover:bg-light-blue-400 focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">Your Profile</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-light-blue-200 hover:text-white hover:bg-light-blue-400 focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">Settings</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-light-blue-200 hover:text-white hover:bg-light-blue-400 focus:outline-none focus:text-white focus:bg-light-blue-400 transition duration-150 ease-in-out">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="hidden bg-white border-b border-gray-200 lg:flex" aria-label="Breadcrumb">
|
||||
<ol class="max-w-screen-xl w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8">
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<!-- Heroicon name: home -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 transition duration-150 ease-in-out" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
||||
</svg>
|
||||
</a>
|
||||
<span class="sr-only">Home</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex items-center space-x-4">
|
||||
<svg class="flex-shrink-0 w-6 h-full text-gray-200" preserveraspectratio="none" viewBox="0 0 24 44" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a href="#" class="text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out">Projects</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex items-center space-x-4">
|
||||
<svg class="flex-shrink-0 w-6 h-full text-gray-200" preserveraspectratio="none" viewBox="0 0 24 44" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a href="#" aria-current="page" class="text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out">Project Nero</a>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-lg mx-auto pt-10 pb-12 px-4 lg:pb-16">
|
||||
<form>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-1">
|
||||
<h1 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Project Settings
|
||||
</h1>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Let’s get started by filling in the information below to create your new project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="project_name" class="block text-sm font-medium leading-5 text-gray-700">
|
||||
Project Name
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input id="project_name" class="form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" value="Project Nero" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="description" class="block text-sm font-medium leading-5 text-gray-700">
|
||||
Description
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<textarea id="description" rows="3" class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="space-y-1">
|
||||
<label for="add_team_members" class="block text-sm font-medium leading-5 text-gray-700">
|
||||
Add Team Members
|
||||
</label>
|
||||
<p id="add_team_members_helper" class="sr-only">Search by email address</p>
|
||||
<div class="flex space-x-3">
|
||||
<div class="flex-grow rounded-md shadow-sm">
|
||||
<input id="add_team_members" class="form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" placeholder="Email address" aria-describedby="add_team_members_helper" />
|
||||
</div>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-500 focus:outline-none focus:border-light-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: plus -->
|
||||
<svg class="-ml-2 mr-1 h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span>Add</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-b border-gray-200">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li class="py-4 flex space-x-3">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm leading-5 font-medium text-gray-900">Calvin Hawkins</span>
|
||||
<span class="text-sm leading-5 text-gray-500">calvin.hawkins@example.com</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="py-4 flex space-x-3">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm leading-5 font-medium text-gray-900">Bessie Richards</span>
|
||||
<span class="text-sm leading-5 text-gray-500">bessie.richards@example.com</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="py-4 flex space-x-3">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm leading-5 font-medium text-gray-900">Floyd Black</span>
|
||||
<span class="text-sm leading-5 text-gray-500">floyd.black@example.com</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend class="text-sm leading-5 font-medium text-gray-900">
|
||||
Privacy
|
||||
</legend>
|
||||
|
||||
<div class="mt-1 bg-white rounded-md shadow-sm -space-y-px">
|
||||
<!-- On: "bg-light-blue-50 border-light-blue-200 z-10", Off: "border-gray-200" -->
|
||||
<div class="relative border rounded-tl-md rounded-tr-md p-4 flex">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="settings-option-0" name="privacy_setting" type="radio" class="form-radio h-4 w-4 text-light-blue-600 transition duration-150 ease-in-out cursor-pointer" checked />
|
||||
</div>
|
||||
<label for="settings-option-0" class="ml-3 flex flex-col cursor-pointer">
|
||||
<!-- On: "text-light-blue-900", Off: "text-gray-900" -->
|
||||
<span class="block text-sm leading-5 font-medium">
|
||||
Public access
|
||||
</span>
|
||||
<!-- On: "text-light-blue-700", Off: "text-gray-500" -->
|
||||
<span class="block text-sm leading-5">
|
||||
This project would be available to anyone who has the link
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- On: "bg-light-blue-50 border-light-blue-200 z-10", Off: "border-gray-200" -->
|
||||
<div class="relative border border-gray-200 p-4 flex">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="settings-option-1" name="privacy_setting" type="radio" class="form-radio h-4 w-4 text-light-blue-600 transition duration-150 ease-in-out cursor-pointer" />
|
||||
</div>
|
||||
<label for="settings-option-1" class="ml-3 flex flex-col cursor-pointer">
|
||||
<!-- On: "text-light-blue-900", Off: "text-gray-900" -->
|
||||
<span class="block text-sm leading-5 font-medium">
|
||||
Private to Project Members
|
||||
</span>
|
||||
<!-- On: "text-light-blue-700", Off: "text-gray-500" -->
|
||||
<span class="block text-sm leading-5">
|
||||
Only members of this project would be able to access
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- On: "bg-light-blue-50 border-light-blue-200 z-10", Off: "border-gray-200" -->
|
||||
<div class="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="settings-option-2" name="privacy_setting" type="radio" class="form-radio h-4 w-4 text-light-blue-600 transition duration-150 ease-in-out cursor-pointer" />
|
||||
</div>
|
||||
<label for="settings-option-2" class="ml-3 flex flex-col cursor-pointer">
|
||||
<!-- On: "text-light-blue-900", Off: "text-gray-900" -->
|
||||
<span class="block text-sm leading-5 font-medium">
|
||||
Private to you
|
||||
</span>
|
||||
<!-- On: "text-light-blue-700", Off: "text-gray-500" -->
|
||||
<span class="block text-sm leading-5">
|
||||
You are the only one able to access this project
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="tags" class="block text-sm font-medium leading-5 text-gray-700">
|
||||
Tags
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input id="tags" class="form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-light-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
|
||||
Cancel
|
||||
</button>
|
||||
</span>
|
||||
<span class="ml-3 inline-flex rounded-md shadow-sm">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-light-blue-500 hover:bg-light-blue-400 focus:outline-none focus:border-light-blue-600 focus:shadow-outline-blue active:bg-light-blue-600 transition duration-150 ease-in-out">
|
||||
Create this project
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,447 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="h-screen bg-white overflow-hidden flex">
|
||||
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
|
||||
<div class="md:hidden">
|
||||
<div class="fixed inset-0 z-40 flex">
|
||||
<!--
|
||||
Off-canvas menu overlay, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-0"
|
||||
To: "opacity-100"
|
||||
Leaving: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div class="fixed inset-0">
|
||||
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
|
||||
</div>
|
||||
<!--
|
||||
Off-canvas menu, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition ease-in-out duration-300 transform"
|
||||
From: "-translate-x-full"
|
||||
To: "translate-x-0"
|
||||
Leaving: "transition ease-in-out duration-300 transform"
|
||||
From: "translate-x-0"
|
||||
To: "-translate-x-full"
|
||||
-->
|
||||
<div class="relative max-w-xs w-full bg-white pt-5 pb-4 flex-1 flex flex-col">
|
||||
<div class="absolute top-0 right-0 -mr-14 p-1">
|
||||
<button class="h-12 w-12 rounded-full flex items-center justify-center focus:outline-none focus:bg-gray-600">
|
||||
<svg class="h-6 w-6 text-white" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 px-4 flex items-center">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/easywire-logo-purple-600-gray-900.svg" alt="Easywire" />
|
||||
</div>
|
||||
<div class="mt-5 flex-1 h-0 overflow-y-auto">
|
||||
<nav class="h-full flex flex-col">
|
||||
<div class="space-y-1">
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-base leading-6 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: home -->
|
||||
<svg class="mr-4 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-base leading-6 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: briefcase -->
|
||||
<svg class="mr-4 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Jobs
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-base leading-6 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: document-search -->
|
||||
<svg class="mr-4 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
|
||||
</svg>
|
||||
Applications
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-base leading-6 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chat -->
|
||||
<svg class="mr-4 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
Messages
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-base leading-6 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: users -->
|
||||
<svg class="mr-4 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center py-2 px-3 text-sm leading-5 font-medium text-purple-600 bg-purple-50 border-l-4 border-purple-600 focus:outline-none focus:bg-purple-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="mr-3 h-6 w-6 text-purple-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-auto pt-10 space-y-1">
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: question-mark-circle -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Help
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-14">
|
||||
<!-- Dummy element to force sidebar to shrink to fit close icon -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden md:flex md:flex-shrink-0">
|
||||
<div class="w-64 flex flex-col">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<nav class="bg-gray-50 border-r border-gray-200 pt-5 pb-4 flex flex-col flex-grow overflow-y-auto">
|
||||
<div class="flex-shrink-0 px-4 flex items-center">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/easywire-logo-purple-600-gray-900.svg" alt="Easywire" />
|
||||
</div>
|
||||
<div class="flex-grow mt-5 flex flex-col">
|
||||
<div class="flex-1 space-y-1">
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: home -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: briefcase -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Jobs
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: document-search -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
|
||||
</svg>
|
||||
Applications
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chat -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
Messages
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: users -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-purple-600 bg-purple-50 border-l-4 border-purple-600 focus:outline-none focus:bg-purple-100 transition ease-in-out duration-150" aria-current="page">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="mr-3 h-6 w-6 text-purple-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 block w-full">
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: question-mark-circle -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Help
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md py-2 px-4 flex items-center text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="w-full max-w-4xl mx-auto md:px-8 xl:px-0">
|
||||
<div class="relative z-10 flex-shrink-0 h-16 bg-white border-b border-gray-200 flex">
|
||||
<button class="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden" aria-label="Open sidebar">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex-1 flex justify-between px-4 md:px-0">
|
||||
<div class="flex-1 flex">
|
||||
<form class="w-full flex md:ml-0" action="#" method="GET">
|
||||
<label for="search_field" class="sr-only">Search</label>
|
||||
<div class="relative w-full text-gray-400 focus-within:text-gray-600">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center">
|
||||
<!-- Heroicon name: search -->
|
||||
<svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<input id="search_field" class="h-full w-full rounded-md py-2 pl-8 pr-3 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 sm:hidden" placeholder="Search" type="search" />
|
||||
<input id="search_field" class="hidden h-full w-full rounded-md py-2 pl-8 pr-3 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 sm:block" placeholder="Search jobs, applicants, and more" type="search" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<button class="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:shadow-outline focus:text-gray-500">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
<div class="sr-only">Notifications</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="flex-1 overflow-y-auto focus:outline-none" tabindex="0">
|
||||
<div class="relative max-w-4xl mx-auto md:px-8 xl:px-0">
|
||||
<div class="pt-10 pb-16">
|
||||
<div class="px-4 sm:px-6 md:px-0">
|
||||
<h1 class="text-3xl leading-9 font-extrabold text-gray-900">Settings</h1>
|
||||
</div>
|
||||
<div class="px-4 sm:px-6 md:px-0">
|
||||
<div class="py-6">
|
||||
<!-- Tabs -->
|
||||
<div class="lg:hidden">
|
||||
<select aria-label="Selected tab" class="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 transition ease-in-out duration-150">
|
||||
<option selected>General</option>
|
||||
|
||||
<option>Password</option>
|
||||
|
||||
<option>Notifications</option>
|
||||
|
||||
<option>Plan</option>
|
||||
|
||||
<option>Billing</option>
|
||||
|
||||
<option>Team Members</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="hidden lg:block">
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="-mb-px flex">
|
||||
<a href="#" class="whitespace-no-wrap py-4 px-1 border-b-2 border-purple-500 font-medium text-sm leading-5 text-purple-600 focus:outline-none focus:text-purple-800 focus:border-purple-700">
|
||||
General
|
||||
</a>
|
||||
|
||||
<a href="#" class="whitespace-no-wrap ml-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
|
||||
Password
|
||||
</a>
|
||||
|
||||
<a href="#" class="whitespace-no-wrap ml-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
|
||||
Notifications
|
||||
</a>
|
||||
|
||||
<a href="#" class="whitespace-no-wrap ml-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
|
||||
Plan
|
||||
</a>
|
||||
|
||||
<a href="#" class="whitespace-no-wrap ml-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
|
||||
Billing
|
||||
</a>
|
||||
|
||||
<a href="#" class="whitespace-no-wrap ml-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
|
||||
Team Members
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description list with inline editing -->
|
||||
<div class="mt-10 space-y-6 divide-y divide-gray-200">
|
||||
<div class="space-y-1">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Profile
|
||||
</h3>
|
||||
<p class="max-w-2xl text-sm leading-5 text-gray-500">
|
||||
This information will be displayed publicly so be careful what you share.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<dl class="divide-y divide-gray-200">
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Name
|
||||
</dt>
|
||||
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<span class="flex-grow">Chelsea Hagon</span>
|
||||
<span class="flex-shrink-0">
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Update
|
||||
</button>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:pt-5">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Photo
|
||||
</dt>
|
||||
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<span class="flex-grow">
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</span>
|
||||
<span class="flex-shrink-0 flex items-start space-x-4">
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Update
|
||||
</button>
|
||||
<span class="text-gray-300" aria-hidden="true">|</span>
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Remove
|
||||
</button>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:pt-5">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Email
|
||||
</dt>
|
||||
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<span class="flex-grow">chelsea.hagon@example.com</span>
|
||||
<span class="flex-shrink-0">
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Update
|
||||
</button>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-b sm:border-gray-200">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Job title
|
||||
</dt>
|
||||
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<span class="flex-grow">Human Resources Manager</span>
|
||||
<span class="flex-shrink-0">
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Update
|
||||
</button>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 space-y-6 divide-y divide-gray-200">
|
||||
<div class="space-y-1">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Account
|
||||
</h3>
|
||||
<p class="max-w-2xl text-sm leading-5 text-gray-500">
|
||||
Manage how information is displayed on your account.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<dl class="divide-y divide-gray-200">
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Language
|
||||
</dt>
|
||||
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<span class="flex-grow">English</span>
|
||||
<span class="flex-shrink-0">
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Update
|
||||
</button>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:pt-5">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Date format
|
||||
</dt>
|
||||
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<span class="flex-grow">DD-MM-YYYY</span>
|
||||
<span class="flex-shrink-0 flex items-start space-x-4">
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Update
|
||||
</button>
|
||||
<span class="text-gray-300" aria-hidden="true">|</span>
|
||||
<button type="button" class="font-medium text-purple-600 hover:text-purple-500 transition duration-150 ease-in-out">
|
||||
Remove
|
||||
</button>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:pt-5">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Automatic timezone
|
||||
</dt>
|
||||
<dd class="flex text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<!-- On: "bg-purple-600", Off: "bg-gray-200" -->
|
||||
<span role="checkbox" tabindex="0" aria-checked="true" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline sm:ml-auto">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-b sm:border-gray-200">
|
||||
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||
Auto-update applicant data
|
||||
</dt>
|
||||
<dd class="flex text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<!-- On: "bg-purple-600", Off: "bg-gray-200" -->
|
||||
<span role="checkbox" tabindex="0" aria-checked="false" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline sm:ml-auto">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,446 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<header class="bg-white shadow">
|
||||
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
|
||||
<div class="relative h-16 flex justify-between">
|
||||
<div class="relative z-10 px-2 flex lg:px-0">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<img class="block h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-orange-500.svg" alt="Workflow logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-0 flex-1 px-2 flex items-center justify-center sm:absolute sm:inset-0">
|
||||
<div class="max-w-xs w-full">
|
||||
<label for="search" class="sr-only">Search</label>
|
||||
<div class="relative">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<!-- Heroicon name: search -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<input id="search" class="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm leading-5 placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:border-blue-300 focus:shadow-outline-blue sm:text-sm transition duration-150 ease-in-out" placeholder="Search" type="search" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 flex items-center lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button class="rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-expanded="false">
|
||||
<span class="sr-only">Open menu</span>
|
||||
<!-- Icon when menu is closed. -->
|
||||
<!--
|
||||
Heroicon name: menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open. -->
|
||||
<!--
|
||||
Heroicon name: x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center">
|
||||
<button class="flex-shrink-0 border-2 border-transparent rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">Notifications</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="flex-shrink-0 relative ml-4">
|
||||
<div>
|
||||
<button class="border-2 border-transparent rounded-full flex focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out" id="user-menu" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
Profile dropdown panel, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
|
||||
<div class="bg-white rounded-md shadow-xs py-1" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
|
||||
<a href="#" class="block py-2 px-4 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Your Profile</a>
|
||||
|
||||
<a href="#" class="block py-2 px-4 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Settings</a>
|
||||
|
||||
<a href="#" class="block py-2 px-4 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="hidden lg:py-2 lg:flex lg:space-x-8" aria-label="Global">
|
||||
<a href="#" class="rounded-md py-2 px-3 inline-flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">
|
||||
Dashboard
|
||||
</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 inline-flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">
|
||||
Jobs
|
||||
</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 inline-flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">
|
||||
Applicants
|
||||
</a>
|
||||
|
||||
<a href="#" class="rounded-md py-2 px-3 inline-flex items-center text-sm leading-5 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">
|
||||
Company
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, toggle classes based on menu state.
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<nav class="hidden lg:hidden" aria-label="Global">
|
||||
<div class="pt-2 pb-3 px-2 space-y-1">
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition duration-150 ease-in-out">Dashboard</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition duration-150 ease-in-out">Jobs</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition duration-150 ease-in-out">Applicants</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4 pb-3">
|
||||
<div class="px-4 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80" alt="" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium leading-6 text-gray-800">Lisa Marie</div>
|
||||
<div class="text-sm font-medium leading-5 text-gray-500">lisamarie@example.com</div>
|
||||
</div>
|
||||
<button class="ml-auto flex-shrink-0 border-2 border-transparent rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">Notifications</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition duration-150 ease-in-out">Your Profile</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition duration-150 ease-in-out">Settings</a>
|
||||
|
||||
<a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:bg-gray-50 focus:text-gray-900 transition duration-150 ease-in-out">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="max-w-7xl mx-auto pb-10 lg:py-12 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
|
||||
<aside class="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="group rounded-md px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: user-circle -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Profile
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Account
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: key -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Password
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Notifications
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group bg-gray-50 rounded-md px-3 py-2 flex items-center text-sm leading-5 font-medium text-orange-600 hover:bg-white focus:outline-none focus:bg-white transition ease-in-out duration-150" aria-current="page">
|
||||
<!-- Heroicon name: credit-card -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-orange-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Plan & Billing
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group rounded-md px-3 py-2 flex items-center text-sm leading-5 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid-add -->
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="truncate">
|
||||
Integrations
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Payment details -->
|
||||
<div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9">
|
||||
<section aria-labelledby="payment_details_heading">
|
||||
<form action="#" method="POST">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="bg-white py-6 px-4 space-y-6 sm:p-6">
|
||||
<div>
|
||||
<h2 id="payment_details_heading" class="text-lg leading-6 font-medium text-gray-900">Payment details</h2>
|
||||
<p class="mt-1 text-sm leading-5 text-gray-500">Update your billing information. Please note that updating your location could affect your tax rates.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-6">
|
||||
<div class="col-span-4 sm:col-span-2">
|
||||
<label for="first_name" class="block text-sm font-medium leading-5 text-gray-700">First name</label>
|
||||
<input id="first_name" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 sm:col-span-2">
|
||||
<label for="last_name" class="block text-sm font-medium leading-5 text-gray-700">Last name</label>
|
||||
<input id="last_name" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 sm:col-span-2">
|
||||
<label for="email_address" class="block text-sm font-medium leading-5 text-gray-700">Email address</label>
|
||||
<input id="email_address" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 sm:col-span-1">
|
||||
<label for="expiration_date" class="block text-sm font-medium leading-5 text-gray-700">Expration date</label>
|
||||
<input id="expiration_date" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" placeholder="MM / YY" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 sm:col-span-1">
|
||||
<label for="security_code" class="flex items-center space-x-1 text-sm font-medium leading-5 text-gray-700">
|
||||
<span>Security code</span>
|
||||
<!-- Heroicon name: question-mark-circle -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</label>
|
||||
<input id="security_code" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 sm:col-span-2">
|
||||
<label for="country" class="block text-sm font-medium leading-5 text-gray-700">Country / Region</label>
|
||||
<select id="country" class="form-select mt-1 block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
|
||||
<option>United States</option>
|
||||
<option>Canada</option>
|
||||
<option>Mexico</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 sm:col-span-2">
|
||||
<label for="postal_code" class="block text-sm font-medium leading-5 text-gray-700">ZIP / Postal</label>
|
||||
<input id="postal_code" class="form-input mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="submit" class="bg-gray-800 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out">
|
||||
Save
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- Plan -->
|
||||
<section aria-labelledby="plan_heading">
|
||||
<form action="#" method="POST">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="bg-white py-6 px-4 space-y-6 sm:p-6">
|
||||
<div>
|
||||
<h2 id="plan_heading" class="text-lg leading-6 font-medium text-gray-900">Plan</h2>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend class="sr-only">
|
||||
Pricing plans
|
||||
</legend>
|
||||
<ul class="relative bg-white rounded-md -space-y-px">
|
||||
<li>
|
||||
<!-- On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" -->
|
||||
<div class="relative border rounded-tl-md rounded-tr-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
||||
<label class="flex items-center text-sm leading-5 space-x-3 cursor-pointer">
|
||||
<input name="pricing_plan" type="radio" class="form-radio h-4 w-4 text-orange-500 transition duration-150 ease-in-out cursor-pointer" aria-describedby="plan-option-pricing-0 plan-option-limit-0" />
|
||||
<span class="font-medium text-gray-900">Startup</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-0" class="ml-6 pl-1 text-sm leading-5 md:ml-0 md:pl-0 md:text-center">
|
||||
<!-- On: "text-orange-900", Off: "text-gray-900" -->
|
||||
<span class="font-medium">$29 / mo</span>
|
||||
<!-- On: "text-orange-700", Off: "text-gray-500" -->
|
||||
<span>($290 / yr)</span>
|
||||
</p>
|
||||
<!-- On: "text-orange-700", Off: "text-gray-500" -->
|
||||
<p id="plan-option-limit-0" class="ml-6 pl-1 text-sm leading-5 md:ml-0 md:pl-0 md:text-right">Up to 5 active job postings</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<!-- On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" -->
|
||||
<div class="relative border border-gray-200 p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
||||
<label class="flex items-center text-sm leading-5 space-x-3 cursor-pointer">
|
||||
<input name="pricing_plan" type="radio" class="form-radio h-4 w-4 text-orange-500 transition duration-150 ease-in-out cursor-pointer" aria-describedby="plan-option-pricing-1 plan-option-limit-1" checked />
|
||||
<span class="font-medium text-gray-900">Business</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-1" class="ml-6 pl-1 text-sm leading-5 md:ml-0 md:pl-0 md:text-center">
|
||||
<!-- On: "text-orange-900", Off: "text-gray-900" -->
|
||||
<span class="font-medium">$99 / mo</span>
|
||||
<!-- On: "text-orange-700", Off: "text-gray-500" -->
|
||||
<span>($990 / yr)</span>
|
||||
</p>
|
||||
<!-- On: "text-orange-700", Off: "text-gray-500" -->
|
||||
<p id="plan-option-limit-1" class="ml-6 pl-1 text-sm leading-5 md:ml-0 md:pl-0 md:text-right">Up to 25 active job postings</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<!-- On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" -->
|
||||
<div class="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
||||
<label class="flex items-center text-sm leading-5 space-x-3 cursor-pointer">
|
||||
<input name="pricing_plan" type="radio" class="form-radio h-4 w-4 text-orange-500 transition duration-150 ease-in-out cursor-pointer" aria-describedby="plan-option-pricing-2 plan-option-limit-2" />
|
||||
<span class="font-medium text-gray-900">Enterprise</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-2" class="ml-6 pl-1 text-sm leading-5 md:ml-0 md:pl-0 md:text-center">
|
||||
<!-- On: "text-orange-900", Off: "text-gray-900" -->
|
||||
<span class="font-medium">$249 / mo</span>
|
||||
<!-- On: "text-orange-700", Off: "text-gray-500" -->
|
||||
<span>($2490 / yr)</span>
|
||||
</p>
|
||||
<!-- On: "text-orange-700", Off: "text-gray-500" -->
|
||||
<p id="plan-option-limit-2" class="ml-6 pl-1 text-sm leading-5 md:ml-0 md:pl-0 md:text-right">Unlimited active job postings</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- On: "bg-orange-500", Off: "bg-gray-200" -->
|
||||
<span role="checkbox" tabindex="0" aria-checked="true" aria-labelledby="toggleLabel" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline-orange">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
<span id="toggleLabel">
|
||||
<span class="text-sm leading-5 font-medium text-gray-900">Annual billing </span>
|
||||
<span class="text-sm leading-5 text-gray-500">(Save 10%)</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="submit" class="bg-gray-800 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out">
|
||||
Save
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- Billing history -->
|
||||
<section aria-labelledby="billing_history_heading">
|
||||
<div class="bg-white pt-6 space-y-6 shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 sm:px-6">
|
||||
<h2 id="billing_history_heading" class="text-lg leading-6 font-medium text-gray-900">Billing history</h2>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||
<div class="overflow-hidden border-t border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Date
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Description
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Amount
|
||||
</th>
|
||||
<!--
|
||||
`relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile.
|
||||
-->
|
||||
<th scope="col" class="relative px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
<span class="sr-only">View receipt</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
|
||||
1/1/2020
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
|
||||
Business Plan - Annual Billing
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
|
||||
CA$109.00
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
|
||||
<a href="#" class="text-orange-600 hover:text-orange-900">View receipt</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user