init
This commit is contained in:
@@ -0,0 +1,517 @@
|
||||
<!--
|
||||
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 flex overflow-hidden bg-cool-gray-100">
|
||||
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
|
||||
<div class="lg:hidden">
|
||||
<div class="fixed inset-0 flex z-40">
|
||||
<!--
|
||||
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-cool-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 flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-teal-600">
|
||||
<div class="absolute top-0 right-0 -mr-14 p-1">
|
||||
<button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-cool-gray-600" aria-label="Close sidebar">
|
||||
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex items-center px-4">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/easywire-logo-on-brand.svg" alt="Easywire logo" />
|
||||
</div>
|
||||
<div class="mt-5 overflow-y-auto">
|
||||
<nav class="px-2 space-y-1">
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-teal-700 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: home -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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 flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: clock -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
History
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: scale -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
Balances
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: credit-card -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
Cards
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: user-group -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
Recipients
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: document-report -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<hr class="h-px mt-6 bg-teal-700 border-none" />
|
||||
<div class="mt-6 flex-1 h-0 overflow-y-auto">
|
||||
<nav class="px-2 space-y-1">
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 group-hover:text-teal-200 group-focus:text-teal-200 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>
|
||||
Settings
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: question-mark-circle -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-300 group-hover:text-teal-200 group-focus:text-teal-200 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 flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-300 group-hover:text-teal-200 group-focus:text-teal-200 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
Privacy
|
||||
</a>
|
||||
</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 lg:flex lg:flex-shrink-0">
|
||||
<div class="flex flex-col w-64">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex flex-col flex-grow bg-teal-600 pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/easywire-logo-on-brand.svg" alt="Easywire logo" />
|
||||
</div>
|
||||
<div class="mt-5 flex-1 flex flex-col overflow-y-auto">
|
||||
<div class="overflow-y-auto">
|
||||
<nav class="px-2 space-y-1">
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-white bg-teal-700 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: home -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 group-hover:text-teal-200 group-focus:text-teal-200 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 flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: clock -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-300 group-hover:text-teal-200 group-focus:text-teal-200 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
History
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: scale -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-300 group-hover:text-teal-200 group-focus:text-teal-200 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 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
Balances
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: credit-card -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-300 group-hover:text-teal-200 group-focus:text-teal-200 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 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
Cards
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: user-group -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-300 group-hover:text-teal-200 group-focus:text-teal-200 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
Recipients
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: document-report -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-300 group-hover:text-teal-200 group-focus:text-teal-200 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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<hr class="h-px mt-6 bg-teal-700 border-none" />
|
||||
<div class="mt-6 flex-1 h-0 overflow-y-auto">
|
||||
<nav class="px-2 space-y-1">
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cog -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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>
|
||||
Settings
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: question-mark-circle -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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 flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-teal-100 hover:text-white hover:bg-teal-500 focus:outline-none focus:bg-teal-500 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="mr-4 h-6 w-6 text-teal-200 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
Privacy
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto focus:outline-none" tabindex="0">
|
||||
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:border-none">
|
||||
<button class="px-4 border-r border-cool-gray-200 text-cool-gray-400 focus:outline-none focus:bg-cool-gray-100 focus:text-cool-gray-600 lg:hidden" aria-label="Open sidebar">
|
||||
<!-- Heroicon name: menu-alt-1 -->
|
||||
<svg class="h-6 w-6 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="M4 6h16M4 12h8m-8 6h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Search bar -->
|
||||
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:max-w-6xl lg:mx-auto lg:px-8">
|
||||
<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-cool-gray-400 focus-within:text-cool-gray-600">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" clip-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" />
|
||||
</svg>
|
||||
</div>
|
||||
<input id="search_field" class="block w-full h-full pl-8 pr-3 py-2 rounded-md text-cool-gray-900 placeholder-cool-gray-500 focus:outline-none focus:placeholder-cool-gray-400 sm:text-sm" placeholder="Search" type="search" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<button class="p-1 text-cool-gray-400 rounded-full hover:bg-cool-gray-100 hover:text-cool-gray-500 focus:outline-none focus:shadow-outline focus:text-cool-gray-500" aria-label="Notifications">
|
||||
<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="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-3 relative">
|
||||
<div>
|
||||
<button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:bg-cool-gray-100 lg:p-2 lg:rounded-md lg:hover:bg-cool-gray-100" id="user-menu" aria-label="User menu" aria-haspopup="true">
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
<p class="hidden ml-3 text-cool-gray-700 text-sm leading-5 font-medium lg:block">Emilia Birch</p>
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="hidden flex-shrink-0 ml-1 h-5 w-5 text-cool-gray-400 lg:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</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 text-cool-gray-700 hover:bg-cool-gray-100 transition ease-in-out duration-150" role="menuitem">Your Profile</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-cool-gray-700 hover:bg-cool-gray-100 transition ease-in-out duration-150" role="menuitem">Settings</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-cool-gray-700 hover:bg-cool-gray-100 transition ease-in-out duration-150" role="menuitem">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="flex-1 relative pb-8 z-0 overflow-y-auto">
|
||||
<!-- Page header -->
|
||||
<div class="bg-white shadow">
|
||||
<div class="px-4 sm:px-6 lg:max-w-6xl lg:mx-auto lg:px-8">
|
||||
<div class="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-cool-gray-200">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Profile -->
|
||||
<div class="flex items-center">
|
||||
<img class="hidden h-15 w-15 rounded-full sm:block" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80" alt="" />
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<img class="h-15 w-15 rounded-full sm:hidden" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80" alt="" />
|
||||
<h1 class="ml-3 text-2xl font-bold leading-7 text-cool-gray-900 sm:leading-9 sm:truncate">
|
||||
Good morning, Emilia Birch
|
||||
</h1>
|
||||
</div>
|
||||
<dl class="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
|
||||
<dt class="sr-only">Company</dt>
|
||||
<dd class="flex items-center text-sm leading-5 text-cool-gray-500 font-medium capitalize sm:mr-6">
|
||||
<!-- Heroicon name: office-building -->
|
||||
<svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-cool-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Duke street studio
|
||||
</dd>
|
||||
<dt class="sr-only">Account status</dt>
|
||||
<dd class="mt-3 flex items-center text-sm leading-5 text-cool-gray-500 font-medium sm:mr-6 sm:mt-0 capitalize">
|
||||
<!-- Heroicon name: check-circle -->
|
||||
<svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Verified account
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex space-x-3 md:mt-0 md:ml-4">
|
||||
<span class="shadow-sm rounded-md">
|
||||
<button type="button" class="inline-flex items-center px-4 py-2 border border-cool-gray-300 text-sm leading-5 font-medium rounded-md text-cool-gray-700 bg-white hover:text-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-cool-gray-800 active:bg-cool-gray-50 transition duration-150 ease-in-out">
|
||||
Add money
|
||||
</button>
|
||||
</span>
|
||||
<span class="shadow-sm rounded-md">
|
||||
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:shadow-outline-teal focus:border-teal-700 active:bg-teal-700 transition duration-150 ease-in-out">
|
||||
Send money
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-lg leading-6 font-medium text-cool-gray-900">Overview</h2>
|
||||
<div class="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Card -->
|
||||
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: scale -->
|
||||
<svg class="h-6 w-6 text-cool-gray-400" 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 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm leading-5 font-medium text-cool-gray-500 truncate">
|
||||
Account balance
|
||||
</dt>
|
||||
<dd>
|
||||
<div class="text-lg leading-7 font-medium text-cool-gray-900">
|
||||
$30,659.45
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-cool-gray-50 px-5 py-3">
|
||||
<div class="text-sm leading-5">
|
||||
<a href="#" class="font-medium text-teal-600 hover:text-teal-900 transition ease-in-out duration-150">
|
||||
View all
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- More cards... -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="max-w-6xl mx-auto mt-8 px-4 text-lg leading-6 font-medium text-cool-gray-900 sm:px-6 lg:px-8">
|
||||
Recent activity
|
||||
</h2>
|
||||
|
||||
<!-- Activity list (smallest breakopoint only) -->
|
||||
<div class="shadow sm:hidden">
|
||||
<ul class="mt-2 divide-y divide-cool-gray-200 overflow-hidden shadow sm:hidden">
|
||||
<li>
|
||||
<a href="#" class="block px-4 py-4 bg-white hover:bg-cool-gray-50">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-1 flex space-x-2 truncate">
|
||||
<!-- Heroicon name: cash -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-cool-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div class="text-cool-gray-500 text-sm truncate">
|
||||
<p class="truncate">Payment to Molly Sanders</p>
|
||||
<p><span class="text-cool-gray-900 font-medium">$20,000</span> USD</p>
|
||||
<p>July 11, 2020</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Heroicon name: chevron-right -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-cool-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- More items... -->
|
||||
</ul>
|
||||
<nav class="bg-white px-4 py-3 flex items-center justify-between border-t border-cool-gray-200">
|
||||
<div class="flex-1 flex justify-between">
|
||||
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-cool-gray-300 text-sm leading-5 font-medium rounded-md text-cool-gray-700 bg-white hover:text-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-cool-gray-100 active:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Previous
|
||||
</a>
|
||||
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-cool-gray-300 text-sm leading-5 font-medium rounded-md text-cool-gray-700 bg-white hover:text-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-cool-gray-100 active:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Activity table (small breakopoint and up) -->
|
||||
<div class="hidden sm:block">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col mt-2">
|
||||
<div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-cool-gray-200">
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
<th class="px-6 py-3 bg-cool-gray-50 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider">
|
||||
Transaction
|
||||
</th>
|
||||
<th class="px-6 py-3 bg-cool-gray-50 text-right text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider">
|
||||
Amount
|
||||
</th>
|
||||
<th class="hidden px-6 py-3 bg-cool-gray-50 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider md:block">
|
||||
Status
|
||||
</th>
|
||||
<th class="px-6 py-3 bg-cool-gray-50 text-right text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider">
|
||||
Date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="bg-white divide-y divide-cool-gray-200">
|
||||
|
||||
<tr class="bg-white">
|
||||
<td class="max-w-0 w-full px-6 py-4 whitespace-no-wrap text-sm leading-5 text-cool-gray-900">
|
||||
<div class="flex">
|
||||
<a href="#" class="group inline-flex space-x-2 truncate text-sm leading-5">
|
||||
<!-- Heroicon name: cash -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-cool-gray-400 group-hover:text-cool-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<p class="text-cool-gray-500 truncate group-hover:text-cool-gray-900 transition ease-in-out duration-150">
|
||||
Payment to Molly Sanders
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right whitespace-no-wrap text-sm leading-5 text-cool-gray-500">
|
||||
<span class="text-cool-gray-900 font-medium">$20,000 </span>
|
||||
USD
|
||||
</td>
|
||||
<td class="hidden px-6 py-4 whitespace-no-wrap text-sm leading-5 text-cool-gray-500 md:block">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-green-100 text-green-800 capitalize">
|
||||
success
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right whitespace-no-wrap text-sm leading-5 text-cool-gray-500">
|
||||
July 11, 2020
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- More rows... -->
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
<!-- Pagination -->
|
||||
<nav class="bg-white px-4 py-3 flex items-center justify-between border-t border-cool-gray-200 sm:px-6">
|
||||
<div class="hidden sm:block">
|
||||
<p class="text-sm leading-5 text-cool-gray-700">
|
||||
Showing
|
||||
<span class="font-medium">1</span>
|
||||
to
|
||||
<span class="font-medium">10</span>
|
||||
of
|
||||
<span class="font-medium">20</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-1 flex justify-between sm:justify-end">
|
||||
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-cool-gray-300 text-sm leading-5 font-medium rounded-md text-cool-gray-700 bg-white hover:text-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-cool-gray-100 active:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Previous
|
||||
</a>
|
||||
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-cool-gray-300 text-sm leading-5 font-medium rounded-md text-cool-gray-700 bg-white hover:text-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-cool-gray-100 active:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,300 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- Background color split screen for large screens --><html>
|
||||
<head /><body>
|
||||
<div class="fixed top-0 left-0 w-1/2 h-full bg-white"></div>
|
||||
<div class="fixed top-0 right-0 w-1/2 h-full bg-gray-50"></div>
|
||||
<div class="relative min-h-screen flex flex-col">
|
||||
<!-- Navbar -->
|
||||
<nav class="flex-shrink-0 bg-indigo-700">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
|
||||
<div class="relative flex items-center justify-between h-16">
|
||||
<!-- Logo section -->
|
||||
<div class="flex items-center px-2 lg:px-0 xl:w-64">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-brand.svg" alt="Workflow logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search section -->
|
||||
<div class="flex-1 flex justify-center lg:justify-end">
|
||||
<div class="w-full px-2 lg:px-6">
|
||||
<label for="search" class="sr-only">Search projects</label>
|
||||
<div class="relative text-indigo-300 focus-within:text-gray-400">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<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 pl-10 pr-3 py-2 border border-transparent rounded-md leading-5 bg-indigo-400 bg-opacity-25 text-indigo-300 placeholder-indigo-300 focus:outline-none focus:bg-white focus:placeholder-gray-400 focus:text-gray-900 sm:text-sm transition duration-150 ease-in-out" placeholder="Search projects" type="search" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button class="inline-flex items-center justify-center p-2 rounded-md text-indigo-400 hover:text-white hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600 focus:text-white transition duration-150 ease-in-out" aria-label="Main menu" aria-expanded="false">
|
||||
<!-- Icon when menu is closed. -->
|
||||
<!--
|
||||
Heroicon name: menu-alt-1
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" 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 12h8m-8 6h16" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open. -->
|
||||
<!--
|
||||
Heroicon name: x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden h-6 w-6" 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>
|
||||
<!-- Links section -->
|
||||
<div class="hidden lg:block lg:w-80">
|
||||
<div class="flex items-center justify-end">
|
||||
<div class="flex">
|
||||
<a href="#" class="px-3 py-2 rounded-md text-sm leading-5 font-medium text-indigo-200 hover:text-white focus:outline-none focus:text-white focus:bg-indigo-600 transition duration-150 ease-in-out">Documentation</a>
|
||||
<a href="#" class="px-3 py-2 rounded-md text-sm leading-5 font-medium text-indigo-200 hover:text-white focus:outline-none focus:text-white focus:bg-indigo-600 transition duration-150 ease-in-out">Support</a>
|
||||
</div>
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-4 relative flex-shrink-0">
|
||||
<div>
|
||||
<button class="flex text-sm rounded-full text-white focus:outline-none focus:shadow-solid transition duration-150 ease-in-out" id="user-menu" aria-label="User menu" aria-haspopup="true">
|
||||
<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=crop&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">View 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">Logout</a>
|
||||
</div>
|
||||
</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="px-2 pt-2 pb-3">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-indigo-800 focus:outline-none focus:text-indigo-100 focus:bg-indigo-600 transition duration-150 ease-in-out">Dashboard</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 focus:outline-none focus:text-white focus:bg-indigo-600 transition duration-150 ease-in-out">Support</a>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-indigo-800">
|
||||
<div class="px-2">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 focus:outline-none focus:text-white focus:bg-indigo-600 transition duration-150 ease-in-out">Your Profile</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 focus:outline-none focus:text-white focus:bg-indigo-600 transition duration-150 ease-in-out">Settings</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 focus:outline-none focus:text-white focus:bg-indigo-600 transition duration-150 ease-in-out">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 3 column wrapper -->
|
||||
<div class="flex-grow w-full max-w-7xl mx-auto xl:px-8 lg:flex">
|
||||
<!-- Left sidebar & main wrapper -->
|
||||
<div class="flex-1 min-w-0 bg-white xl:flex">
|
||||
<!-- Account profile -->
|
||||
<div class="xl:flex-shrink-0 xl:w-64 xl:border-r xl:border-gray-200 bg-white">
|
||||
<div class="pl-4 pr-6 py-6 sm:pl-6 lg:pl-8 xl:pl-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 space-y-8">
|
||||
<div class="space-y-8 sm:space-y-0 sm:flex sm:justify-between sm:items-center xl:block xl:space-y-8">
|
||||
<!-- Profile -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="flex-shrink-0 h-12 w-12">
|
||||
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80" alt="" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="text-sm leading-5 font-medium text-gray-900">Debbie Lewis</div>
|
||||
<a href="#" class="group flex items-center space-x-2.5">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99917 0C4.02996 0 0 4.02545 0 8.99143C0 12.9639 2.57853 16.3336 6.15489 17.5225C6.60518 17.6053 6.76927 17.3277 6.76927 17.0892C6.76927 16.8762 6.76153 16.3104 6.75711 15.5603C4.25372 16.1034 3.72553 14.3548 3.72553 14.3548C3.31612 13.316 2.72605 13.0395 2.72605 13.0395C1.9089 12.482 2.78793 12.4931 2.78793 12.4931C3.69127 12.5565 4.16643 13.4198 4.16643 13.4198C4.96921 14.7936 6.27312 14.3968 6.78584 14.1666C6.86761 13.5859 7.10022 13.1896 7.35713 12.965C5.35873 12.7381 3.25756 11.9665 3.25756 8.52116C3.25756 7.53978 3.6084 6.73667 4.18411 6.10854C4.09129 5.88114 3.78244 4.96654 4.27251 3.72904C4.27251 3.72904 5.02778 3.48728 6.74717 4.65082C7.46487 4.45101 8.23506 4.35165 9.00028 4.34779C9.76494 4.35165 10.5346 4.45101 11.2534 4.65082C12.9717 3.48728 13.7258 3.72904 13.7258 3.72904C14.217 4.96654 13.9082 5.88114 13.8159 6.10854C14.3927 6.73667 14.7408 7.53978 14.7408 8.52116C14.7408 11.9753 12.6363 12.7354 10.6318 12.9578C10.9545 13.2355 11.2423 13.7841 11.2423 14.6231C11.2423 15.8247 11.2313 16.7945 11.2313 17.0892C11.2313 17.3299 11.3937 17.6097 11.8501 17.522C15.4237 16.3303 18 12.9628 18 8.99143C18 4.02545 13.97 0 8.99917 0Z" fill="currentcolor" />
|
||||
</svg>
|
||||
<div class="text-sm leading-5 text-gray-500 group-hover:text-gray-900 font-medium">debbielewis</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action buttons -->
|
||||
<div class="flex flex-col space-y-3 sm:space-y-0 sm:space-x-3 sm:flex-row xl:flex-col xl:space-x-0 xl:space-y-3">
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
New Project
|
||||
</button>
|
||||
</span>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150">
|
||||
Invite Team
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meta info -->
|
||||
<div class="flex flex-col space-y-6 sm:flex-row sm:space-y-0 sm:space-x-8 xl:flex-col xl:space-x-0 xl:space-y-6">
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Heroicon name: badge-check -->
|
||||
<svg class="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="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-500 leading-5 font-medium">Pro Member</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Heroicon name: collection -->
|
||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-500 leading-5 font-medium">8 Projects</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects List -->
|
||||
<div class="bg-white lg:min-w-0 lg:flex-1">
|
||||
<div class="pl-4 pr-6 pt-4 pb-4 border-b border-t border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6 xl:pt-6 xl:border-t-0">
|
||||
<div class="flex items-center">
|
||||
<h1 class="flex-1 text-lg leading-7 font-medium">Projects</h1>
|
||||
<div class="relative">
|
||||
<span class="rounded-md shadow-sm">
|
||||
<button id="sort-menu" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" aria-haspopup="true" aria-expanded="false">
|
||||
<!-- Heroicon name: sort-ascending -->
|
||||
<svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 3a1 1 0 000 2h11a1 1 0 100-2H3zM3 7a1 1 0 000 2h5a1 1 0 000-2H3zM3 11a1 1 0 100 2h4a1 1 0 100-2H3zM13 16a1 1 0 102 0v-5.586l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 101.414 1.414L13 10.414V16z" />
|
||||
</svg>
|
||||
Sort
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="ml-2.5 -mr-1.5 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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<div class="origin-top-right z-10 absolute right-0 mt-2 w-56 rounded-md shadow-lg">
|
||||
<div class="rounded-md bg-white shadow-xs">
|
||||
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="sort-menu">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Name</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Date modified</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Date created</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="relative z-0 divide-y divide-gray-200 border-b border-gray-200">
|
||||
<li class="relative pl-4 pr-6 py-5 hover:bg-gray-50 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<!-- Repo name and link -->
|
||||
<div class="min-w-0 space-y-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span aria-label="Running" class="h-4 w-4 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<span class="h-2 w-2 bg-green-400 rounded-full"></span>
|
||||
</span>
|
||||
|
||||
<span class="block">
|
||||
<h2 class="text-sm font-medium leading-5">
|
||||
<a href="#">
|
||||
<span class="absolute inset-0"></span>
|
||||
Workcation
|
||||
</a>
|
||||
</h2>
|
||||
</span>
|
||||
</div>
|
||||
<a href="#" class="relative group flex items-center space-x-2.5">
|
||||
<svg class="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99917 0C4.02996 0 0 4.02545 0 8.99143C0 12.9639 2.57853 16.3336 6.15489 17.5225C6.60518 17.6053 6.76927 17.3277 6.76927 17.0892C6.76927 16.8762 6.76153 16.3104 6.75711 15.5603C4.25372 16.1034 3.72553 14.3548 3.72553 14.3548C3.31612 13.316 2.72605 13.0395 2.72605 13.0395C1.9089 12.482 2.78793 12.4931 2.78793 12.4931C3.69127 12.5565 4.16643 13.4198 4.16643 13.4198C4.96921 14.7936 6.27312 14.3968 6.78584 14.1666C6.86761 13.5859 7.10022 13.1896 7.35713 12.965C5.35873 12.7381 3.25756 11.9665 3.25756 8.52116C3.25756 7.53978 3.6084 6.73667 4.18411 6.10854C4.09129 5.88114 3.78244 4.96654 4.27251 3.72904C4.27251 3.72904 5.02778 3.48728 6.74717 4.65082C7.46487 4.45101 8.23506 4.35165 9.00028 4.34779C9.76494 4.35165 10.5346 4.45101 11.2534 4.65082C12.9717 3.48728 13.7258 3.72904 13.7258 3.72904C14.217 4.96654 13.9082 5.88114 13.8159 6.10854C14.3927 6.73667 14.7408 7.53978 14.7408 8.52116C14.7408 11.9753 12.6363 12.7354 10.6318 12.9578C10.9545 13.2355 11.2423 13.7841 11.2423 14.6231C11.2423 15.8247 11.2313 16.7945 11.2313 17.0892C11.2313 17.3299 11.3937 17.6097 11.8501 17.522C15.4237 16.3303 18 12.9628 18 8.99143C18 4.02545 13.97 0 8.99917 0Z" fill="currentcolor" />
|
||||
</svg>
|
||||
<div class="text-sm leading-5 text-gray-500 group-hover:text-gray-900 font-medium truncate">
|
||||
debbielewis/workcation
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sm:hidden">
|
||||
<!-- Heroicon name: chevron-right -->
|
||||
<svg class="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="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>
|
||||
</div>
|
||||
<!-- Repo meta info -->
|
||||
<div class="hidden sm:flex flex-col flex-shrink-0 items-end space-y-3">
|
||||
<p class="flex items-center space-x-4">
|
||||
<a href="#" class="relative text-sm leading-5 text-gray-500 hover:text-gray-900 font-medium">
|
||||
Visit site
|
||||
</a>
|
||||
<button class="relative" type="button">
|
||||
<!-- Heroicon name: star -->
|
||||
<svg class="h-5 w-5 text-yellow-300 hover:text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
</button>
|
||||
</p>
|
||||
<p class="flex text-gray-500 text-sm leading-5 space-x-2">
|
||||
<span>Laravel</span>
|
||||
<span>·</span>
|
||||
<span>Last deploy 3h ago</span>
|
||||
<span>·</span>
|
||||
<span>United states</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- More items... -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity feed -->
|
||||
<div class="bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
|
||||
<div class="pl-6 lg:w-80">
|
||||
<div class="pt-6 pb-2">
|
||||
<h2 class="text-sm leading-5 font-semibold">Activity</h2>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li class="py-4">
|
||||
<div class="flex space-x-3">
|
||||
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80" alt="" />
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium leading-5">You</h3>
|
||||
<p class="text-sm leading-5 text-gray-500">1h</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- More items... -->
|
||||
</ul>
|
||||
<div class="py-4 text-sm leading-5 border-t border-gray-200">
|
||||
<a href="#" class="text-indigo-600 font-semibold hover:text-indigo-900">View all activity →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,514 @@
|
||||
<!--
|
||||
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 flex overflow-hidden bg-white">
|
||||
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
|
||||
<div class="lg:hidden">
|
||||
<div class="fixed inset-0 flex z-40">
|
||||
<!--
|
||||
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 flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
|
||||
<div class="absolute top-0 right-0 -mr-14 p-1">
|
||||
<button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
|
||||
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex items-center px-4">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="mt-5 flex-1 h-0 overflow-y-auto">
|
||||
<nav class="px-2">
|
||||
<div class="space-y-1">
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-900 bg-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: home -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 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 flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-list -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 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="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
My tasks
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: clock -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Recent
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="px-3 text-xs leading-4 font-semibold text-gray-500 uppercase tracking-wider" id="teams-headline">
|
||||
Teams
|
||||
</h3>
|
||||
<div class="mt-1 space-y-1" role="group" aria-labelledby="teams-headline">
|
||||
<a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<span class="w-2.5 h-2.5 mr-4 bg-indigo-500 rounded-full"></span>
|
||||
<span class="truncate">
|
||||
Engineering
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<span class="w-2.5 h-2.5 mr-4 bg-teal-400 rounded-full"></span>
|
||||
<span class="truncate">
|
||||
Human Resources
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<span class="w-2.5 h-2.5 mr-4 bg-orange-500 rounded-full"></span>
|
||||
<span class="truncate">
|
||||
Customer Success
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</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 lg:flex lg:flex-shrink-0">
|
||||
<div class="flex flex-col w-64 border-r border-gray-200 pt-5 pb-4 bg-gray-100">
|
||||
<div class="flex items-center flex-shrink-0 px-6">
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="h-0 flex-1 flex flex-col overflow-y-auto">
|
||||
<!-- User account dropdown -->
|
||||
<div class="px-3 mt-6 relative inline-block text-left">
|
||||
<!-- Dropdown menu toggle, controlling the show/hide state of dropdown menu. -->
|
||||
<div>
|
||||
<button type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class="flex min-w-0 items-center justify-between space-x-3">
|
||||
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" alt="" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="text-gray-900 text-sm leading-5 font-medium truncate">Jessy Schwarz</h2>
|
||||
<p class="text-gray-500 text-sm leading-5 truncate">@jessyschwarz</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Heroicon name: selector -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
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="z-10 mx-3 origin-top absolute right-0 left-0 mt-1 rounded-md shadow-lg">
|
||||
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">View profile</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Settings</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Notifications</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Get desktop app</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar Search -->
|
||||
<div class="px-3 mt-5">
|
||||
<label for="search" class="sr-only">Search</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<!-- Heroicon name: search -->
|
||||
<svg class="mr-3 h-4 w-4 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="form-input block w-full pl-9 sm:text-sm sm:leading-5" placeholder="Search" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation -->
|
||||
<nav class="px-3 mt-6">
|
||||
<div class="space-y-1">
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-900 bg-gray-200 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: home -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 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 flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-list -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 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="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
My tasks
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: clock -->
|
||||
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Recent
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<!-- Secondary navigation -->
|
||||
<h3 class="px-3 text-xs leading-4 font-semibold text-gray-500 uppercase tracking-wider" id="teams-headline">
|
||||
Teams
|
||||
</h3>
|
||||
<div class="mt-1 space-y-1" role="group" aria-labelledby="teams-headline">
|
||||
<a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<span class="w-2.5 h-2.5 mr-4 bg-indigo-500 rounded-full"></span>
|
||||
<span class="truncate">
|
||||
Engineering
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<span class="w-2.5 h-2.5 mr-4 bg-teal-400 rounded-full"></span>
|
||||
<span class="truncate">
|
||||
Human Resources
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
|
||||
<span class="w-2.5 h-2.5 mr-4 bg-orange-500 rounded-full"></span>
|
||||
<span class="truncate">
|
||||
Customer Success
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main column -->
|
||||
<div class="flex flex-col w-0 flex-1 overflow-hidden">
|
||||
<!-- Search header -->
|
||||
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
|
||||
<!-- Sidebar toggle, controls the 'sidebarOpen' sidebar state. -->
|
||||
<button class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
|
||||
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path d="M4 6h16M4 12h8m-8 6h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex-1 flex justify-between px-4 sm:px-6 lg:px-8">
|
||||
<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="absolute inset-y-0 left-0 flex items-center pointer-events-none">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" clip-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" />
|
||||
</svg>
|
||||
</div>
|
||||
<input id="search_field" class="block w-full h-full pl-8 pr-3 py-2 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 sm:text-sm" placeholder="Search" type="search" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<div>
|
||||
<button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true">
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&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="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">View profile</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Settings</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Notifications</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Get desktop app</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0">
|
||||
<!-- Page title & actions -->
|
||||
<div class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
|
||||
Home
|
||||
</h1>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0 sm:ml-4">
|
||||
<span class="order-1 ml-3 shadow-sm rounded-md sm:order-0 sm:ml-0">
|
||||
<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 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 transition duration-150 ease-in-out">
|
||||
Share
|
||||
</button>
|
||||
</span>
|
||||
<span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
|
||||
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-purple-600 hover:bg-purple-500 focus:outline-none focus:shadow-outline-purple focus:border-purple-700 active:bg-indigo-700 transition duration-150 ease-in-out">
|
||||
Create
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pinned projects -->
|
||||
<div class="px-4 mt-6 sm:px-6 lg:px-8">
|
||||
<h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">Pinned Projects</h2>
|
||||
<ul class="grid grid-cols-1 gap-4 sm:gap-6 sm:grid-cols-2 xl:grid-cols-4 mt-3">
|
||||
<li class="relative col-span-1 flex shadow-sm rounded-md">
|
||||
<div class="flex-shrink-0 flex items-center justify-center w-16 bg-pink-600 text-white text-sm leading-5 font-medium rounded-l-md">
|
||||
GA
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
|
||||
<div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
|
||||
<a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
|
||||
GraphQL API
|
||||
</a>
|
||||
<p class="text-gray-500">12 Members</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 pr-2">
|
||||
<button id="pinned-project-options-menu-0" aria-has-popup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: dots-vertical -->
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<!--
|
||||
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="z-10 mx-3 origin-top-right absolute right-10 top-3 w-48 mt-1 rounded-md shadow-lg">
|
||||
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="pinned-project-options-menu-0">
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">View</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Removed from pinned</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Share</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- More project cards... -->
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Projects list (only on smallest breakpoint) -->
|
||||
<div class="mt-10 sm:hidden">
|
||||
<div class="px-4 sm:px-6">
|
||||
<h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">Projects</h2>
|
||||
</div>
|
||||
<ul class="mt-3 border-t border-gray-200 divide-y divide-gray-100">
|
||||
<li>
|
||||
<a href="#" class="flex items-center justify-between px-4 py-4 hover:bg-gray-50 sm:px-6">
|
||||
<div class="flex items-center truncate space-x-3">
|
||||
<div class="w-2.5 h-2.5 flex-shrink-0 rounded-full bg-pink-600"></div>
|
||||
<p class="font-medium truncate text-sm leading-6">GraphQL API <span class="truncate font-normal text-gray-500">in Engineering</span></p>
|
||||
</div>
|
||||
<!-- Heroicon name: chevron-right -->
|
||||
<svg class="ml-4 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<!-- More project rows... -->
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Projects table (small breakpoint and up) -->
|
||||
<div class="hidden mt-8 sm:block">
|
||||
<div class="align-middle inline-block min-w-full border-b border-gray-200">
|
||||
<table class="min-w-full">
|
||||
<thead>
|
||||
|
||||
<tr class="border-t border-gray-200">
|
||||
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
<span class="lg:pl-2">Project</span>
|
||||
</th>
|
||||
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Members
|
||||
</th>
|
||||
<th class="hidden md:table-cell px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Last updated
|
||||
</th>
|
||||
<th class="pr-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" />
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
|
||||
<tr>
|
||||
<td class="px-6 py-3 max-w-0 w-full whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
|
||||
<div class="flex items-center space-x-3 lg:pl-2">
|
||||
<div class="flex-shrink-0 w-2.5 h-2.5 rounded-full bg-pink-600"></div>
|
||||
<a href="#" class="truncate hover:text-gray-600">
|
||||
<span>GraphQL API <span class="text-gray-500 font-normal">in Engineering</span> </span>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-sm leading-5 text-gray-500 font-medium">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex flex-shrink-0 -space-x-1">
|
||||
<img class="max-w-none h-6 w-6 rounded-full text-white shadow-solid" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
|
||||
<img class="max-w-none h-6 w-6 rounded-full text-white shadow-solid" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
|
||||
<img class="max-w-none h-6 w-6 rounded-full text-white shadow-solid" 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="" />
|
||||
|
||||
<img class="max-w-none h-6 w-6 rounded-full text-white shadow-solid" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</div>
|
||||
|
||||
<span class="flex-shrink-0 text-xs leading-5 font-medium">+8</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden md:table-cell px-6 py-3 whitespace-no-wrap text-sm leading-5 text-gray-500 text-right">
|
||||
March 17, 2020
|
||||
</td>
|
||||
<td class="pr-6">
|
||||
<div class="relative flex justify-end items-center">
|
||||
<button id="project-options-menu-0" aria-has-popup="true" type="button" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: dots-vertical -->
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<!--
|
||||
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="mx-3 origin-top-right absolute right-7 top-0 w-48 mt-1 rounded-md shadow-lg">
|
||||
<div class="z-10 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="project-options-menu-0">
|
||||
<div class="py-1">
|
||||
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
|
||||
<!-- Heroicon name: pencil-alt -->
|
||||
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
||||
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
|
||||
<!-- Heroicon name: duplicate -->
|
||||
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z" />
|
||||
<path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z" />
|
||||
</svg>
|
||||
Duplicate
|
||||
</a>
|
||||
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
|
||||
<!-- Heroicon name: user-add -->
|
||||
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z" />
|
||||
</svg>
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
<div class="py-1">
|
||||
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
|
||||
<!-- Heroicon name: trash -->
|
||||
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Delete
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- More project rows... -->
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,268 @@
|
||||
<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">
|
||||
Home 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-f6ca63f1a5c71a58b3d33984748cb61ec69ba508" 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-f6ca63f1a5c71a58b3d33984748cb61ec69ba508">Full-width with sidebar</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/home-screens/full_width_with_sidebar.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-8323b24e7690eb64ef2b19bfb9b2e1749265bdec" 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-8323b24e7690eb64ef2b19bfb9b2e1749265bdec">Card layout with sidebar</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/home-screens/card_layout_with_sidebar.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-fb441f2a80c375d624781ea375718eb8826e2ede" 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-fb441f2a80c375d624781ea375718eb8826e2ede">Constrained multi-column</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/home-screens/constrained_multi_column.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,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