<body class="bg-gray-200 min-h-screen font-base">
<div id="app">
<div class="flex flex-col md:flex-row">
<aside class="w-full md:w-64 bg-gray-800 md:min-h-screen" x-data="{ isOpen: false }">
<div class="flex items-center justify-between bg-gray-900 p-4 h-16">
<a href="#" class="flex items-center">
<svg class="w-6" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.6883 0.335913C32.3407 -0.0248702 31.7929 -0.104067 31.3596 0.142322L19.2249 6.96861L20.3117 1.53926C20.4063 1.06188 20.1797 0.582302 19.7529 0.353512C19.3261 0.126923 18.7981 0.199519 18.455 0.544904L2.96986 16.03C2.94127 16.052 2.91487 16.0762 2.89067 16.1026C1.02735 17.9945 0 20.4804 0 23.1005C0 28.5584 4.4416 33 9.89955 33C12.5218 33 15.0077 31.9727 16.8974 30.1115C16.926 30.0829 16.9502 30.0543 16.9766 30.0235L30.1232 16.8792C30.4532 16.5492 30.539 16.0454 30.3366 15.6252C30.1364 15.205 29.6876 14.9674 29.2235 15.0092L24.4409 15.5394L32.8379 1.67125C33.0975 1.24227 33.0381 0.694497 32.6883 0.335913ZM9.89955 29.7002C6.25431 29.7002 3.29985 26.7457 3.29985 23.1005C3.29985 19.4552 6.25431 16.5008 9.89955 16.5008C13.5448 16.5008 16.4992 19.4552 16.4992 23.1005C16.4992 26.7457 13.5448 29.7002 9.89955 29.7002Z" fill="#667EEA"/>
</svg>
<span class="text-gray-300 text-xl font-semibold mx-2">Dashboard</span>
</a>
<div class="flex md:hidden">
<button type="button" @click="isOpen = !isOpen"
class="text-gray-300 hover:text-gray-500 focus:outline-none focus:text-gray-500">
<svg class="fill-current w-8" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<div class="px-2 py-6 md:block" :class="isOpen? 'block': 'hidden'" >
<ul>
<li class="px-2 py-3 bg-gray-900 rounded">
<a href="#" class="flex items-center">
<svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24" stroke="currentColor">
<path
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"></path>
</svg>
<span class="mx-2 text-gray-300">Dashboard</span>
</a>
</li>
<li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
<a href="#" class="flex items-center">
<svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path
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"></path>
</svg>
<span class="mx-2 text-gray-300">Team</span>
</a>
</li>
<li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
<a href="#" class="flex items-center">
<svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
</svg>
<span class="mx-2 text-gray-300">Projects</span>
</a>
</li>
<li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
<a href="#" class="flex items-center">
<svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span class="mx-2 text-gray-300">Calendar</span>
</a>
</li>
<li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
<a href="#" class="flex items-center">
<svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg>
<span class="mx-2 text-gray-300">Documents</span>
</a>
</li>
<li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
<a href="#" class="flex items-center">
<svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span class="mx-2 text-gray-300">Reports</span>
</a>
</li>
</ul>
<div class="border-t border-gray-700 -mx-2 mt-2 md:hidden"></div>
<ul class="mt-6 md:hidden">
<li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
<a href="#" class="mx-2 text-gray-300">Account Settings</a>
</li>
<li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
<button class="mx-2 text-gray-300" @click="logout">Logout</button>
</li>
</ul>
</div>
</aside>
<div class="w-full md:flex-1">
<nav class="hidden md:flex justify-between items-center bg-white p-4 shadow-md h-16">
<div>
<input class="px-4 py-2 bg-gray-200 border border-gray-300 rounded focus:outline-none" type="text"
placeholder="Search.."/>
</div>
<div>
<button class="mx-2 text-gray-700 focus:outline-none"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<svg class="h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" stroke="currentColor">
<path
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
</svg>
</button>
</div>
</nav>
<main>
<!-- Replace with your content -->
<div class="px-8 py-6">
<div class="bg-white p-6 rounded shadow">
<h2 class="text-2xl font-medium">Tables</h2>
<div class="mt-4">
<div class="flex flex-col">
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
<div
class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
<table class="min-w-full">
<thead class="bg-gray-100">
<tr>
<th class="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"
style="text-align: start">
Name
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
style="text-align: start">
Title
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
style="text-align: start">
Status
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
style="text-align: start">
Role
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
</tr>
</thead>
<tbody class="bg-white">
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""/>
</div>
<div class="mx-2">
<div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
<div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
Software Engineer
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
Owner
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""/>
</div>
<div class="mx-2">
<div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
<div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
Actor
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
Owner
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white p-6 rounded shadow mt-4">
<h2 class="text-2xl font-medium">Steve forms</h2>
<div class="mt-4">
<div>
<div class="flex flex-col sm:flex-row py-8">
<div class="sm:w-1/4">
<h2 class="text-xl">Account details</h2>
</div>
<div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
<label class="block">
<span class="text-gray-700">Name</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
<label class="block">
<span class="text-gray-700">Email</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
</div>
</div>
<div class="flex py-8 flex-col sm:flex-row border-t border-gray-200">
<div class="sm:w-1/4">
<h2 class="text-xl">Account details</h2>
</div>
<div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
<label class="block">
<span class="text-gray-700">Name</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
<label class="block">
<span class="text-gray-700">Email</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white p-6 rounded shadow mt-4">
<h2 class="text-2xl font-medium">Casual forms</h2>
<div class="mt-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<label class="block">
<span class="text-gray-700">Name</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
<label class="block">
<span class="text-gray-700">Name</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
type="text">
</label>
</div>
</div>
</div>
<div class="bg-white p-6 rounded shadow mt-4">
<h2 class="text-2xl font-medium">Buttons</h2>
<div class="mt-4">
<button class="px-2 py-1 bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium rounded">Primary
sm
</button>
<button class="px-2 py-1 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded">Success
sm
</button>
<button class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded">Danger sm
</button>
<button class="px-3 py-1 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary</button>
<button class="px-3 py-1 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success</button>
<button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger</button>
<button class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary lg
</button>
<button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success lg</button>
<button class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger lg</button>
</div>
</div>
</div>
<!-- /End replace -->
</main>
</div>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</body>
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.