Tailwind CSS Flex Layout Sidebar Starter Page
February 15, 2021
Intro
It was more challenging than I thought it was going to be to find an example of a sidebar landing page using Tailwind CSS. I realized quickly that my misake was searching for Tailwind specific results, when I should have been just searching for flex layout results and applying them using Tailwind.
Anyways, below is an example layout I came up with as a decent starting point. It is not perfect, and definitely not responsize as it is below but it is a solid starting point.
Layout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="static/css/tailwind.css">
</head>
<body>
<main class="flex">
<div class="flex flex-col justify-between w-1/4 h-screen bg-gray-500">
<header class="bg-blue-300 py-4">
Header
</header>
<nav class="bg-pink-500">
Nav
</nav>
<footer class="mt-auto bg-green-200 py-4">
Footer
</footer>
</div>
<div class="flex flex-col justify-between w-3/4 bg-red-400">
<header class="bg-blue-700 py-4">
Content Header
</header>
<section class="bg-purple-400">
Content
</section>
<footer class="mt-auto bg-pink-300 py-4">
Content Footer
</footer>
</div>
</main>
</body>
</html>
Related posts
- Tailwind Grid Responsive Layout Starter Page
- Responsive Sidenav Template Using CSS Grid
- Flexbox Sidenav Example
- Responsive Hero Section
- Responsive Grid Feature Section
- Team Cards Grid