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> <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>
- 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