Footer block for use with websites and landing pages.

Dependencies

  • Tailwind CSS
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Footer 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="footer-2 bg-gray-800 pt-6 md:pt-12">
        <div class="container px-4 mx-auto">

            <div class="md:flex md:flex-wrap md:-mx-4 py-6 md:pb-12">

                <div class="footer-info lg:w-1/3 md:px-4">
                    <h4 class="text-white text-2xl mb-4">19K users are using FWR blocks and making their life easy.</h4>
                    <p class="text-gray-400">We have carefully crafted the blocks to suit to everyone's need.</p>
                    <div class="mt-4">
                        <button class="bg-facebook py-2 px-4 text-white rounded mt-2 transition-colors duration-300">
                            <span class="fab fa-facebook-f mr-2"></span> Follow
                        </button>
                        <button class="bg-twitter py-2 px-4 text-white rounded ml-2 mt-2 transition-colors duration-300">
                            <span class="fab fa-twitter mr-2"></span> Follow @freeweb19
                        </button>
                    </div>
                </div>

                <div class="md:w-2/3 lg:w-1/3 md:px-4 xl:pl-16 mt-12 lg:mt-0">
                    <div class="sm:flex">
                        <div class="sm:flex-1">
                            <h6 class="text-base font-medium text-white uppercase mb-2">About</h6>
                            <div>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Company</a>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Culture</a>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Team</a>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Careers</a>
                            </div>
                        </div>
                        <div class="sm:flex-1 mt-4 sm:mt-0">
                            <h6 class="text-base font-medium text-white uppercase mb-2">What we offer</h6>
                            <div>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Blocks</a>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Resources</a>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Tools</a>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Tutorials</a>
                                <a href="#" class="text-gray-400 py-1 block hover:underline">Freebies</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="md:w-1/3 md:px-4 md:text-center mt-12 lg:mt-0">
                    <h5 class="text-lg text-white font-medium mb-4">Explore our site</h5>
                    <button class="bg-indigo-600 text-white hover:bg-indigo-700 rounded py-2 px-6 md:px-12 transition-colors duration-300">Explore</button>
                </div>

            </div>

        </div>

        <div class="border-t border-solid border-gray-900 mt-4 py-4">
            <div class="container px-4 mx-auto">

                <div class="md:flex md:-mx-4 md:items-center">
                    <div class="md:flex-1 md:px-4 text-center md:text-left">
                        <p class="text-white">&copy; <strong>FWR</strong></p>
                    </div>
                    <div class="md:flex-1 md:px-4 text-center md:text-right">
                        <a href="#" class="py-2 px-4 text-white inline-block hover:underline">Terms of Service</a>
                        <a href="#" class="py-2 px-4 text-white inline-block hover:underline">Privacy Policy</a>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <!-- /.footer-2 -->

    <!-- Scripts -->
</body>
</html>
// Variables
$facebook: #3b5998;
$twitter: #1da1f2;

// Custom CSS
.bg-facebook {
  background-color: $facebook;

  &:hover {
    background-color: darken($facebook, 5%);
  }
}

.bg-twitter {
  background-color: $twitter;

  &:hover {
    background-color: darken($twitter, 5%);
  }
}
.bg-facebook {
  background-color: #3b5998;
}

.bg-facebook:hover {
  background-color: #344e86;
}

.bg-twitter {
  background-color: #1da1f2;
}

.bg-twitter:hover {
  background-color: #0d95e8;
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvZm9vdGVyL2Zvb3Rlci0y