Tailwind CSS Flex Layout Sidebar Starter Page

February 15, 2021

popular tailwindcss

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