Footer 2 TailwindCSS
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">© <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;
}
