TailwindCss Fixed NavBar
If someone is still looking for this, here the solution using the rights tailwind classes.
my layout look like this:
<div> <header class="sticky top-0 z-50"></header> <main class=relative></main> <footer></footer></div>
Using 'Fixed NavBar' in Tailwind.Here is the template code for you to get started:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tailwind Starter Template - Fixed Header : Tailwind Toolbox</title> <meta name="author" content="name"> <meta name="description" content="description here"> <meta name="keywords" content="keywords,here"> <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created--> <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <!--Totally optional :) --> </head><body class="bg-gray-400 font-sans leading-normal tracking-normal"> <!--Nav--> <nav class="bg-gray-800 p-2 mt-0 fixed w-full z-10 top-0"> <div class="container mx-auto flex flex-wrap items-center"> <div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold"> <a class="text-white no-underline hover:text-white hover:no-underline" href="#"> <span class="text-2xl pl-2"><i class="em em-grinning"></i> Brand McBrandface</span> </a> </div> <div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end"> <ul class="list-reset flex justify-between flex-1 md:flex-none items-center"> <li class="mr-3"> <a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a> </li> <li class="mr-3"> <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a> </li> <li class="mr-3"> <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a> </li> <li class="mr-3"> <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a> </li> </ul> </div> </div> </nav> <!--Container--> <div class="container shadow-lg mx-auto bg-white mt-24 md:mt-16 h-screen"> <p>Here you Go!</p> </div></body></html>
Here is the solution by using only Flex box.
CodeSandbox link
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Sticky-header-and-footer-with-tailwind</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" /> </head> <body> <div class="flex flex-col h-screen"> <header class="py-5 bg-gray-700 text-white text-center"> Sticky Header and Footer with Tailwind </header> <main class="flex-1 overflow-y-auto p-5"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, the 1914 translation by H. Rackham. </main> <footer class="py-5 bg-gray-700 text-center text-white"> Tailwind is Awesome 😎 </footer> </div> </body></html>