In this tutorial, we will create tailwind css footer section, responsive footer section, footer newsletter section, tailwind css social media icons footer, copyright & subscribe form and useful links , example with tailwind css.
How to install & setup Tailwind CSS v3
Example 1
Tailwind CSS simple footer section with social media icons.
<!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.0" />
<title>Tailwind CSS simple footer section with social media icons.</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<footer class="border-t border-gray-200">
<div
class="container flex flex-wrap items-center justify-center px-4 py-8 mx-auto lg:justify-between"
>
<div class="flex flex-wrap justify-center">
<ul class="flex items-center space-x-4">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Terms</li>
</ul>
</div>
<div class="flex justify-center mt-4 lg:mt-0">
<a>
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-blue-600"
viewBox="0 0 24 24"
>
<path
d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-blue-300"
viewBox="0 0 24 24"
>
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-pink-400"
viewBox="0 0 24 24"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path
d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0"
class="w-6 h-6 text-blue-500"
viewBox="0 0 24 24"
>
<path
stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</div>
</div>
</footer>
</body>
</html>
tailwind footer v1
Example 2
Tailwind CSS simple responsive footer section with newsletter input form.
<!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.0" />
<title>
Tailwind CSS simple responsive footer section with newsletter input form.
</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<footer class="border-t border-gray-200">
<div
class="
container
flex flex-wrap
items-center
justify-center
px-4
py-8
mx-auto
lg:justify-between
"
>
<div class="flex flex-wrap justify-center">
<ul class="flex items-center space-x-4">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Terms</li>
</ul>
</div>
<div class="flex items-center my-4 lg:my-0">
<form class="flex flex-wrap items-center justify-center">
<div class="mb-2 lg:mb-0 lg:mr-2">
<input
type="text"
name="newsletter"
class="
w-full
px-3
py-2
text-gray-700
bg-gray-100
border border-gray-300
rounded
outline-none
focus:ring-1
"
/>
</div>
<button
class="
px-6
py-2
text-white
bg-red-500
border-0
rounded
focus:outline-none
hover:bg-red-700
"
>
Subscribe
</button>
</form>
</div>
<div class="flex justify-center mt-4 lg:mt-0">
<a>
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-blue-600"
viewBox="0 0 24 24"
>
<path
d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-blue-300"
viewBox="0 0 24 24"
>
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-pink-400"
viewBox="0 0 24 24"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path
d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0"
class="w-6 h-6 text-blue-500"
viewBox="0 0 24 24"
>
<path
stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</div>
</div>
</footer>
</body>
</html>
tailwind footer v2
Example 3
Tailwind CSS responsive footer section with logo, useful links, copyright.
<!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.0" />
<title>Tailwind CSS responsive footer section with Useful Links</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<footer class="border-t border-gray-200">
<div
class="
container
flex flex-col flex-wrap
px-4
py-16
mx-auto
md:items-center
lg:items-start
md:flex-row md:flex-nowrap
"
>
<div
class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left"
>
<a
class="
flex
items-center
justify-center
text-4xl
font-bold
text-blue-700
md:justify-start
"
>
Logo
</a>
<p class="mt-2 text-sm text-gray-500">
Footer dummay data Lorem.....
</p>
</div>
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li>
<a class="text-gray-600 hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">About Us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Blogs</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li>
<a class="text-gray-600 hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">About Us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Blogs</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li>
<a class="text-gray-600 hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">About Us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Blogs</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center">
<p class="text-base text-gray-400">
All rights reserved by @ company 2021
</p>
</div>
</footer>
</body>
</html>
Example 4
Tailwind CSS responsive footer section with copyright, subscribe form, useful links, social media icons.
<!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.0" />
<title>
Tailwind CSS responsive footer section with subscribe form, useful links,
social media icons.
</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<footer class="border-t border-gray-200">
<div
class="
container
flex flex-col flex-wrap
px-4
py-16
mx-auto
md:items-center
lg:items-start
md:flex-row md:flex-nowrap
"
>
<div
class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left"
>
<a
class="
flex
items-center
justify-center
text-4xl
font-bold
text-blue-700
md:justify-start
"
>
Logo
</a>
<p class="mt-2 text-sm text-justify text-gray-500">
Footer Dummay data Lorem....
</p>
<div class="flex mt-4">
<input
type="text"
class="
h-auto
p-2
text-sm
border border-grey-light
round
text-grey-dark
"
placeholder="Your email address"
/>
<button class="h-auto p-3 text-xs text-white bg-red-600 rounded-sm">
Subscribe
</button>
</div>
<div class="flex justify-center mt-4 lg:mt-2">
<a>
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-blue-600"
viewBox="0 0 24 24"
>
<path
d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-blue-300"
viewBox="0 0 24 24"
>
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-6 h-6 text-pink-400"
viewBox="0 0 24 24"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path
d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"
></path>
</svg>
</a>
<a class="ml-3">
<svg
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0"
class="w-6 h-6 text-blue-500"
viewBox="0 0 24 24"
>
<path
stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</div>
</div>
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li>
<a class="text-gray-600 hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">About Us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Blogs</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li>
<a class="text-gray-600 hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">About Us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Blogs</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li>
<a class="text-gray-600 hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">About Us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Blogs</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center -mt-12">
<p class="text-base text-gray-400">
All rights reserved by @ company 2021
</p>
</div>
</footer>
</body>
</html>
tailwind footer v4
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
