Published on

Ultimate Guide: Make A Footer With Tailwind CSS

Tags
Pages
Footer

If you are a FrontEnd developer, you must have heard of Tailwind CSS. It is a utility-first CSS framework that provides you with a set of pre-defined classes to quickly style your web pages. In this article, we will guide you on how to create a footer using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides you with a set of pre-defined classes to quickly style your web pages. It is a low-level framework that allows you to build custom designs without writing any CSS code. Tailwind CSS provides you with a set of pre-defined classes that you can use to style your HTML elements.

A footer is a section of a web page that appears at the bottom of the page. It usually contains information about the website, copyright information, and links to other pages. A footer is an essential part of a web page as it provides users with important information about the website.

Tailwind CSS provides you with a set of pre-defined classes that you can use to quickly style your web pages. It is a low-level framework that allows you to build custom designs without writing any CSS code. Using Tailwind CSS to create a footer will save you a lot of time and effort.

To create a footer using Tailwind CSS, you can use the following classes:

  • bg-gray-800: This class sets the background color of the footer to gray.
  • text-white: This class sets the text color of the footer to white.
  • py-4: This class sets the padding of the footer to 4.
  • text-center: This class centers the text in the footer.

Free download of the Footer's source code

To create a footer using Tailwind CSS, you can use the following HTML code:

<footer class="bg-gray-800 text-white py-4">
  <div class="container mx-auto text-center">
    <p>&copy; 2021 FrontEnd Blogger. All rights reserved.</p>
  </div>
</footer>

<div class="bg-black">
	<div class="mx-auto flex flex-col md:flex-row mb-6 md:mb-24">
		<div class="flex flex-col w-full lg:w-1/3 p-8 mt-6">
			<p class="ml-6 text-yellow-500 text-lg uppercase tracking-loose">REVIEW</p>
			<p class="text-white text-3xl md:text-5xl my-4 leading-relaxed md:leading-snug">Leave us a feedback!</p>
		</div>
		<div class="flex flex-col w-full lg:w-2/3 justify-center">
			<div class="w-full px-4">
				<div class="flex flex-wrap justify-center">
					<div class="w-full lg:w-6/12 px-4">
						<div
							class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-white">
							<div class="flex-auto p-5 lg:p-10">
								<h4 class="text-2xl mb-4 text-black-500 font-semibold">Have a suggestion?</h4>
								<form action="" method="POST">
									<div class="relative w-full mb-3">
										<label class="block uppercase text-gray-700 text-xs font-bold mb-2"
                        for="email">Email</label><input class="border-0 px-3 py-3 rounded text-sm shadow w-full
                    bg-gray-50 placeholder-black-555 text-gray-800 outline-none focus:bg-gray-100" type="email" name="email" id="email" placeholder=" "
                        style="transition: all 0.15s ease 0s;" required />
                    </div>
										<div class="relative w-full mb-3">
											<label class="block uppercase text-gray-700 text-xs font-bold mb-2"
                        for="message">Message</label><textarea maxlength="300" name="feedback" id="feedback" rows="4"
                        cols="80"
                        class="border-0 px-3 py-3 bg-gray-50 placeholder-black-555 text-gray-800 rounded text-sm shadow focus:outline-none w-full"
                        required></textarea>
										</div>
										<div class="text-center mt-6">
											<button id="feedbackBtn"
                        class="bg-yellow-500 text-black-500 text-center mx-auto active:bg-yellow-400 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
                        type="submit" style="transition: all 0.15s ease 0s;">Submit
                      </button>
										</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<footer class="relative bg-gray-50 text-black-500 pt-8 pb-6">
		<div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
			style="height: 80px;">
			<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
				version="1.1" viewBox="0 0 2560 100" x="0" y="0">
				<polygon class="text-gray-50 fill-current" points="2560 0 2560 100 0 100"></polygon>
			</svg>
		</div>

		<section class="pt-6 pb-4 md:pb-12 ">
			<div class="mx-auto px-4">
				<div class="flex flex-wrap justify-center text-center mb-12">
					<div class="w-full lg:w-6/12 px-4">
						<h4 class="text-3xl md:text-5xl text-black-500 font-semibold">Meet Our Sponsors</h4>
					</div>
				</div>
				<div class="flex flex-wrap">
					<div class="w-full md:w-6/12 lg:w-4/12 lg:mb-0 mb-12 px-4">
						<div class="px-6">
							<svg class="max-w-full mx-auto" clip-rule="evenodd" fill-rule="evenodd"
								stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 560 400"
								xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<linearGradient id="a"
									gradientTransform="matrix(89.6891 155.353 -155.353 89.6891 168.883 122.323)"
									gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0">
									<stop offset="0" stop-color="#058f92" />
									<stop offset=".5" stop-color="#038489" />
									<stop offset="1" stop-color="#026d71" />
								</linearGradient>
								<path
									d="m415 93.62v165.289l-93.273 9.818-112.909-9.818v-165.289c0-.007 0-.013 0-.02 0-6.264 5.155-11.418 11.419-11.418h.019 183.306.019c6.264 0 11.419 5.154 11.419 11.418z"
									fill="#37c6d0" fill-rule="nonzero" />
								<path
									d="m415 189.495v39.223l-3.485 4.958h-109.424l68.973-68.972c2.534-2.545 5.981-3.977 9.572-3.977 3.592 0 7.039 1.432 9.573 3.977z"
									fill="#1a9ba1" fill-rule="nonzero" />
								<path
									d="m415 228.718v30.191l-93.273 9.818-112.909-9.818v-.687l108.246-108.246c2.534-2.544 5.981-3.976 9.572-3.976 3.592 0 7.039 1.432 9.573 3.976l27.246 27.246z"
									fill="#038387" fill-rule="nonzero" />
								<circle cx="380.636" cy="116.545" fill="#86f2f2" r="14.727" />
								<g fill-rule="nonzero">
									<path
										d="m220.271 317.818h183.276c6.282-.003 11.45-5.171 11.453-11.453v-47.456h-206.182v47.456c.003 6.282 5.171 11.45 11.453 11.453z"
										fill="#036c70" />
									<path
										d="m287.364 142.711v129.305c.01.66-.056 1.319-.197 1.964-.919 5.461-5.704 9.494-11.242 9.475h-67.107v-152.182h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".2" />
									<path
										d="m292.273 142.711v119.487c-.082 8.937-7.411 16.265-16.348 16.347h-67.107v-152.181h67.107c8.956.032 16.316 7.391 16.348 16.347z"
										fill-opacity=".1" />
									<path
										d="m287.364 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.006 0-.013 0-.02 0h-67.107v-142.363h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".2" />
									<path
										d="m282.455 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.007 0-.013 0-.02 0h-62.198v-142.363h62.198.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".1" />
								</g>
								<path
									d="m282.455 133.606c0-1.288-1.046-2.333-2.333-2.333h-132.789c-1.288 0-2.333 1.045-2.333 2.333v132.788c0 1.288 1.045 2.333 2.333 2.333h132.789c1.287 0 2.333-1.045 2.333-2.333z"
									fill="url(#a)" />
								<path
									d="m195.166 198.601c-2.687-1.784-4.929-4.16-6.554-6.946-1.581-2.906-2.368-6.178-2.282-9.485-.14-4.472 1.373-8.843 4.246-12.273 3.018-3.442 6.924-5.989 11.291-7.363 4.972-1.639 10.18-2.447 15.414-2.391 6.885-.253 13.76.711 20.309 2.847v14.345c-2.846-1.729-5.947-2.999-9.189-3.761-3.515-.867-7.122-1.301-10.742-1.291-3.815-.137-7.607.666-11.04 2.337-2.645 1.139-4.37 3.752-4.379 6.632-.017 1.749.649 3.437 1.856 4.703 1.433 1.485 3.125 2.696 4.992 3.574 2.095 1.034 5.22 2.412 9.377 4.133.461.146.911.327 1.345.54 4.097 1.602 8.05 3.552 11.816 5.827 2.851 1.76 5.246 4.171 6.985 7.035 1.788 3.244 2.66 6.913 2.524 10.614.198 4.586-1.209 9.101-3.977 12.763-2.77 3.395-6.481 5.897-10.667 7.192-4.899 1.536-10.012 2.278-15.145 2.199-4.606.023-9.205-.355-13.745-1.129-3.835-.61-7.579-1.692-11.149-3.22v-15.15c3.421 2.436 7.243 4.254 11.291 5.371 4.02 1.254 8.2 1.924 12.41 1.988 3.899.249 7.792-.578 11.252-2.391 2.404-1.376 3.863-3.971 3.79-6.74.014-1.934-.751-3.794-2.121-5.159-1.711-1.676-3.691-3.055-5.856-4.08-2.488-1.256-6.168-2.904-11.041-4.943-3.852-1.557-7.541-3.493-11.011-5.778z"
									fill="#fff" fill-rule="nonzero" />
							</svg>
						</div>
					</div>
					<div class="w-full md:w-6/12 lg:w-4/12 lg:mb-0 mb-12 px-4">
						<div class="px-6">
							<svg class="max-w-full mx-auto" clip-rule="evenodd" fill-rule="evenodd"
								stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 560 400"
								xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<linearGradient id="a"
									gradientTransform="matrix(89.6891 155.353 -155.353 89.6891 168.883 122.323)"
									gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0">
									<stop offset="0" stop-color="#058f92" />
									<stop offset=".5" stop-color="#038489" />
									<stop offset="1" stop-color="#026d71" />
								</linearGradient>
								<path
									d="m415 93.62v165.289l-93.273 9.818-112.909-9.818v-165.289c0-.007 0-.013 0-.02 0-6.264 5.155-11.418 11.419-11.418h.019 183.306.019c6.264 0 11.419 5.154 11.419 11.418z"
									fill="#37c6d0" fill-rule="nonzero" />
								<path
									d="m415 189.495v39.223l-3.485 4.958h-109.424l68.973-68.972c2.534-2.545 5.981-3.977 9.572-3.977 3.592 0 7.039 1.432 9.573 3.977z"
									fill="#1a9ba1" fill-rule="nonzero" />
								<path
									d="m415 228.718v30.191l-93.273 9.818-112.909-9.818v-.687l108.246-108.246c2.534-2.544 5.981-3.976 9.572-3.976 3.592 0 7.039 1.432 9.573 3.976l27.246 27.246z"
									fill="#038387" fill-rule="nonzero" />
								<circle cx="380.636" cy="116.545" fill="#86f2f2" r="14.727" />
								<g fill-rule="nonzero">
									<path
										d="m220.271 317.818h183.276c6.282-.003 11.45-5.171 11.453-11.453v-47.456h-206.182v47.456c.003 6.282 5.171 11.45 11.453 11.453z"
										fill="#036c70" />
									<path
										d="m287.364 142.711v129.305c.01.66-.056 1.319-.197 1.964-.919 5.461-5.704 9.494-11.242 9.475h-67.107v-152.182h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".2" />
									<path
										d="m292.273 142.711v119.487c-.082 8.937-7.411 16.265-16.348 16.347h-67.107v-152.181h67.107c8.956.032 16.316 7.391 16.348 16.347z"
										fill-opacity=".1" />
									<path
										d="m287.364 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.006 0-.013 0-.02 0h-67.107v-142.363h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".2" />
									<path
										d="m282.455 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.007 0-.013 0-.02 0h-62.198v-142.363h62.198.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".1" />
								</g>
								<path
									d="m282.455 133.606c0-1.288-1.046-2.333-2.333-2.333h-132.789c-1.288 0-2.333 1.045-2.333 2.333v132.788c0 1.288 1.045 2.333 2.333 2.333h132.789c1.287 0 2.333-1.045 2.333-2.333z"
									fill="url(#a)" />
								<path
									d="m195.166 198.601c-2.687-1.784-4.929-4.16-6.554-6.946-1.581-2.906-2.368-6.178-2.282-9.485-.14-4.472 1.373-8.843 4.246-12.273 3.018-3.442 6.924-5.989 11.291-7.363 4.972-1.639 10.18-2.447 15.414-2.391 6.885-.253 13.76.711 20.309 2.847v14.345c-2.846-1.729-5.947-2.999-9.189-3.761-3.515-.867-7.122-1.301-10.742-1.291-3.815-.137-7.607.666-11.04 2.337-2.645 1.139-4.37 3.752-4.379 6.632-.017 1.749.649 3.437 1.856 4.703 1.433 1.485 3.125 2.696 4.992 3.574 2.095 1.034 5.22 2.412 9.377 4.133.461.146.911.327 1.345.54 4.097 1.602 8.05 3.552 11.816 5.827 2.851 1.76 5.246 4.171 6.985 7.035 1.788 3.244 2.66 6.913 2.524 10.614.198 4.586-1.209 9.101-3.977 12.763-2.77 3.395-6.481 5.897-10.667 7.192-4.899 1.536-10.012 2.278-15.145 2.199-4.606.023-9.205-.355-13.745-1.129-3.835-.61-7.579-1.692-11.149-3.22v-15.15c3.421 2.436 7.243 4.254 11.291 5.371 4.02 1.254 8.2 1.924 12.41 1.988 3.899.249 7.792-.578 11.252-2.391 2.404-1.376 3.863-3.971 3.79-6.74.014-1.934-.751-3.794-2.121-5.159-1.711-1.676-3.691-3.055-5.856-4.08-2.488-1.256-6.168-2.904-11.041-4.943-3.852-1.557-7.541-3.493-11.011-5.778z"
									fill="#fff" fill-rule="nonzero" />
							</svg>
						</div>
					</div>
					<div class="w-full md:w-6/12 lg:w-4/12 lg:mb-0 mb-12 px-4">
						<div class="px-6">
							<svg class="max-w-full mx-auto" clip-rule="evenodd" fill-rule="evenodd"
								stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 560 400"
								xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<linearGradient id="a"
									gradientTransform="matrix(89.6891 155.353 -155.353 89.6891 168.883 122.323)"
									gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0">
									<stop offset="0" stop-color="#058f92" />
									<stop offset=".5" stop-color="#038489" />
									<stop offset="1" stop-color="#026d71" />
								</linearGradient>
								<path
									d="m415 93.62v165.289l-93.273 9.818-112.909-9.818v-165.289c0-.007 0-.013 0-.02 0-6.264 5.155-11.418 11.419-11.418h.019 183.306.019c6.264 0 11.419 5.154 11.419 11.418z"
									fill="#37c6d0" fill-rule="nonzero" />
								<path
									d="m415 189.495v39.223l-3.485 4.958h-109.424l68.973-68.972c2.534-2.545 5.981-3.977 9.572-3.977 3.592 0 7.039 1.432 9.573 3.977z"
									fill="#1a9ba1" fill-rule="nonzero" />
								<path
									d="m415 228.718v30.191l-93.273 9.818-112.909-9.818v-.687l108.246-108.246c2.534-2.544 5.981-3.976 9.572-3.976 3.592 0 7.039 1.432 9.573 3.976l27.246 27.246z"
									fill="#038387" fill-rule="nonzero" />
								<circle cx="380.636" cy="116.545" fill="#86f2f2" r="14.727" />
								<g fill-rule="nonzero">
									<path
										d="m220.271 317.818h183.276c6.282-.003 11.45-5.171 11.453-11.453v-47.456h-206.182v47.456c.003 6.282 5.171 11.45 11.453 11.453z"
										fill="#036c70" />
									<path
										d="m287.364 142.711v129.305c.01.66-.056 1.319-.197 1.964-.919 5.461-5.704 9.494-11.242 9.475h-67.107v-152.182h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".2" />
									<path
										d="m292.273 142.711v119.487c-.082 8.937-7.411 16.265-16.348 16.347h-67.107v-152.181h67.107c8.956.032 16.316 7.391 16.348 16.347z"
										fill-opacity=".1" />
									<path
										d="m287.364 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.006 0-.013 0-.02 0h-67.107v-142.363h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".2" />
									<path
										d="m282.455 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.007 0-.013 0-.02 0h-62.198v-142.363h62.198.02c6.264 0 11.419 5.154 11.419 11.418z"
										fill-opacity=".1" />
								</g>
								<path
									d="m282.455 133.606c0-1.288-1.046-2.333-2.333-2.333h-132.789c-1.288 0-2.333 1.045-2.333 2.333v132.788c0 1.288 1.045 2.333 2.333 2.333h132.789c1.287 0 2.333-1.045 2.333-2.333z"
									fill="url(#a)" />
								<path
									d="m195.166 198.601c-2.687-1.784-4.929-4.16-6.554-6.946-1.581-2.906-2.368-6.178-2.282-9.485-.14-4.472 1.373-8.843 4.246-12.273 3.018-3.442 6.924-5.989 11.291-7.363 4.972-1.639 10.18-2.447 15.414-2.391 6.885-.253 13.76.711 20.309 2.847v14.345c-2.846-1.729-5.947-2.999-9.189-3.761-3.515-.867-7.122-1.301-10.742-1.291-3.815-.137-7.607.666-11.04 2.337-2.645 1.139-4.37 3.752-4.379 6.632-.017 1.749.649 3.437 1.856 4.703 1.433 1.485 3.125 2.696 4.992 3.574 2.095 1.034 5.22 2.412 9.377 4.133.461.146.911.327 1.345.54 4.097 1.602 8.05 3.552 11.816 5.827 2.851 1.76 5.246 4.171 6.985 7.035 1.788 3.244 2.66 6.913 2.524 10.614.198 4.586-1.209 9.101-3.977 12.763-2.77 3.395-6.481 5.897-10.667 7.192-4.899 1.536-10.012 2.278-15.145 2.199-4.606.023-9.205-.355-13.745-1.129-3.835-.61-7.579-1.692-11.149-3.22v-15.15c3.421 2.436 7.243 4.254 11.291 5.371 4.02 1.254 8.2 1.924 12.41 1.988 3.899.249 7.792-.578 11.252-2.391 2.404-1.376 3.863-3.971 3.79-6.74.014-1.934-.751-3.794-2.121-5.159-1.711-1.676-3.691-3.055-5.856-4.08-2.488-1.256-6.168-2.904-11.041-4.943-3.852-1.557-7.541-3.493-11.011-5.778z"
									fill="#fff" fill-rule="nonzero" />
							</svg>
						</div>
					</div>
				</div>
			</div>
		</section>

		<div class="mx-auto px-4">
			<div class="flex flex-wrap">
				<div class="w-full lg:w-6/12 px-4">
					<h5 class="text-lg mt-0 mb-2 text-gray-700">
						Follow us on social media to get the latest updates
					</h5>
					<div class="mt-6">
						<a class="transition duration-700 ease-in-out text-black-500 hover:text-red-500 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
							type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
								viewBox="0 0 24 24">
								<path class="fill-current"
									d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
							</svg>
						</a>
						<a class="transition duration-700 ease-in-out text-black-500 hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
							type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
								viewBox="0 0 24 24">
								<path class="fill-current"
									d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
							</svg>
						</a><a
							class="transition duration-700 ease-in-out text-black-500 hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
							type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
								viewBox="0 0 24 24">
								<path class="fill-current"
									d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
							</svg>
						</a><a
							class="transition duration-700 ease-in-out text-black-500 hover:text-pink-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
							type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
								viewBox="0 0 24 24">
								<path class="fill-current"
									d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
							</svg>
						</a><a
							class="transition duration-700 ease-in-out text-black-500 hover:text-gray-700 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
							type="button">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
								<path class="fill-current"
									d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
							</svg></i>
						</a>
					</div>
				</div>
				<div class="w-full lg:w-6/12 px-4 mt-4 md:mt-0">
					<div class="flex flex-wrap items-top mb-6">
						<h5 class="text-lg mt-0 mb-2 text-gray-700">
							Enter your email to view the list of your registered events
						</h5>
						<div class="mt-4 flex">
							<form id="footerForm" action="" method="POST">
								<input type="email" name="email" id="email"
                  class="p-2 border border-grey-light round text-black-500 placeholder-gray-50 text-sm h-auto"
                  placeholder="email address" required />
								<button type="submit" id="emailBtn"
                  class="bg-yellow-500 text-black-500 active:bg-yellow-400 rounded shadow hover:shadow-lg outline-none focus:outline-none h-auto text-xs p-3">Submit</button>
							</form>
						</div>
					</div>
				</div>
			</div>
			<hr class="my-6 border-gray-400" />
			<div class="flex flex-wrap items-center md:justify-between justify-center">
				<div class="w-full md:w-4/12 px-4 mx-auto text-center">
					<div class="text-sm text-gray-600 font-semibold py-1">
						Created By
						<a href="https://github.com/ahampriyanshu"
							class="text-gray-600 hover:text-gray-900">ahampriyanshu</a>.
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>

To create a footer using Tailwind CSS, you can follow these steps:

  1. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer with Tailwind CSS</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
  <footer class="bg-gray-800 text-white py-4">
    <div class="container mx-auto text-center">
      <p>&copy; 2021 FrontEnd Blogger. All rights reserved.</p>
    </div>
  </footer>
</body>
</html>
  1. Save the file with a .html extension.
  2. Open the file in your web browser to see the footer.

Conclusion

In this article, we have shown you how to create a footer using Tailwind CSS. Tailwind CSS provides you with a set of pre-defined classes that you can use to quickly style your web pages. Using Tailwind CSS to create a footer will save you a lot of time and effort. We hope this guide has been helpful to you. Happy coding!