Sticky footer (using tailwind css)

  • Posted on: 12 December 2019
  • By: stillfinder

In this example you can see how to create a sticky footer using tailwind css framework. Or you can implement this using pure CSS. Tailwind is utility-first framework, so it's not a big problem to translate everything to your own classes. In the example below I've used CDN:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

If you would like to use another method you can find more information on Install Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 
    <title>Some title</title>
</head>
<body>
    <div class="flex min-h-screen flex-col">
 
        <div class="container mx-auto flex-1 flex flex-col mt-10 section">
            <div class="flex">
                <div class="w-8/12">
                    Your content here
                </div>
                <div class="w-4/12 px-4">
                    Right sidebar
                </div>
            </div>
        </div>
 
        <footer class="container mx-auto mt-6">
            <div class="text-gray-600 text-center text-sm">
                <p class="mb-2">© Stillfinder.net.  All rights reserved. Yes, all of them.</p>
                <p class="flex justify-center mb-2">
                    <a class="px-2" href="#">First footer link</a>
                    <a class="px-2" href="#">Second footer link</a>
                </p>
            </div>
        </footer>
 
    </div>
</body>
</html>

So, all you need to paste the next code fragment between the body tags:

     <div class="flex min-h-screen flex-col">
 
        <div class="container mx-auto flex-1 flex flex-col mt-10 section">
            <h1 class="text-5xl">Main site content</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
 
        <footer class="container mx-auto mt-6 text-center">
            Footer content
        </footer>
 
    </div>