footer always bottom tailwind code example

Example 1: tailwind push footer always to bottom of screen

<div class="flex flex-col justify-between h-screen">
  <header class="h-16 bg-pink-300">Header</header>
  <main class="mb-auto h-52 bg-purple-300">Main Content</main>
  <footer class="h-16 bg-blue-100">Footer</footer>
</div>

Example 2: how to fix the footer at the bottom of the page tailwind

<body class="flex flex-col min-h-screen ">
  <header>
    Navigation bar
  </header>
  <main class="flex-grow">
    Page content
  </main>
  <footer>
    Social links
  </footer>
</body>

Tags:

Misc Example

Related