Skip to content

Instantly share code, notes, and snippets.

@pravnkay

pravnkay/Readme.md

Last active April 15, 2020 05:52
Show Gist options
  • Save pravnkay/2314b68d0ec9390292e4f8f1fbfabe18 to your computer and use it in GitHub Desktop.
Save pravnkay/2314b68d0ec9390292e4f8f1fbfabe18 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Admin Dashboard - Barebone
Raw
Readme.md

This file uses

  1. Tailwind.css
  2. Apline.js

to create a functional dashboard skeleton.

There are no UI elements. Just the Dashboard

Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tailwind Dahboard</title>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<!-- Styles -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-300 min-h-screen min-w-full">
<div class="flex min-h-screen min-w-full flex-col"
x-data="getDimensions()"
x-on:resize.window="setDimensions()"
x-init="setDimensions()">
<div id="overlay" class="bg-gray-700 hidden opacity-75 min-h-screen min-w-full absolute top-0 left-0"></div>
<nav id="nav" class="bg-teal-500 h-16 fixed right-0 z-100 border-2 border-solid border-black" >
</nav>
<aside id="aside" class="bg-green-300 fixed left-0 h-full w-0 hidden lg:w-48 lg:block" >
<div class="" :style="`height: ${navHeight}px;`">
<p class="text-2xl">
Brand
</p>
</div>
<div class="w-full overflow-y-auto" :style="`height: calc(100% - ${navHeight}px);`">
<p class="text-xl">hi1</p>
<p class="text-xl">hi2</p>
<p class="text-xl">hi3</p>
<p class="text-xl">hi4</p>
<p class="text-xl">hi5</p>
<p class="text-xl">hi6</p>
<p class="text-xl">hi7</p>
<p class="text-xl">hi8</p>
<p class="text-xl">hi9</p>
<p class="text-xl">hi10</p>
<p class="text-xl">hi11</p>
<p class="text-xl">hi12</p>
<p class="text-xl">hi13</p>
<p class="text-xl">hi14</p>
<p class="text-xl">hi15</p>
<p class="text-xl">hi16</p>
<p class="text-xl">hi17</p>
<p class="text-xl">hi18</p>
<p class="text-xl">hi19</p>
<p class="text-xl">hi20</p>
</div>
</aside>
<main id="main" class="bg-red-300 p-6 border-2 border-solid border-black"
:style="`margin-left: ${asideWidth}px; margin-top: ${navHeight}px;`">
<div class="bg-yellow-300 p-32 border-2 border-solid border-black">
<p class="text2xl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur porro nulla, sint dolores dignissimos molestias optio consectetur veniam perferendis labore, numquam facilis quae reprehenderit, fuga doloremque repellat soluta molestiae sapiente. Distinctio accusantium alias dolore exercitationem eum enim, asperiores possimus labore a perspiciatis quaerat numquam voluptatem fugit! Eligendi facilis modi aspernatur!</p>
</div>
<p class="text-3xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa laborum id velit tempore consequatur laboriosam voluptatem cum odio eaque fugit minus beatae, mollitia laudantium sint quibusdam deserunt aliquid dolorem expedita modi recusandae at blanditiis nobis. In architecto, cum, ex asperiores nisi dicta, et mollitia maiores vero quos pariatur illum voluptas a doloribus officiis? Vel molestias incidunt est dolorum veritatis ex perferendis, aspernatur illum quos vitae quam quia tempore similique omnis. Enim, hic? Harum quidem non distinctio. Molestiae excepturi ut eum sapiente? Reprehenderit deserunt, corrupti tempora aliquam deleniti ut consectetur ea temporibus obcaecati, ducimus nulla magni voluptatum unde ipsam voluptas labore?
</p>
</main>
</div>
<script>
function getDimensions(){
return {
asideWidth: document.getElementById('aside').offsetWidth,
navHeight: document.getElementById('nav').offsetHeight
}
}
function setDimensions(){
document.getElementById('nav').style.width = (document.documentElement.clientWidth - document.getElementById('aside').offsetWidth)+'px';
document.getElementById('main').style.marginLeft = (document.getElementById('aside').offsetWidth)+'px';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment