No Time Dad

A blog about web development written by a busy dad

Tailwind CSS Flex Layout Sidebar Starter Page


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.


<!DOCTYPE html>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="static/css/tailwind.css">

  <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">
      <nav class="bg-pink-500">
      <footer class="mt-auto bg-green-200 py-4">
    <div class="flex flex-col justify-between w-3/4 bg-red-400">
      <header class="bg-blue-700 py-4">
        Content Header
      <section class="bg-purple-400">
      <footer class="mt-auto bg-pink-300 py-4">
        Content Footer



Related posts