Published on

Beginners Guide: Build A Slanted Footer With Tailwind CSS

Tags
NavigationsPages
Slanted Footer

Are you a beginner in web development and want to create a slanted footer for your website? Look no further, as Tailwind CSS is here to help you achieve that. In this article, we'll guide you through the process of building a slanted footer using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to create custom designs without writing any CSS. It provides a set of pre-defined classes that can be used to style HTML elements. Tailwind CSS is easy to use, highly customizable, and can be integrated with any front-end framework.

A slanted footer is a UI component that adds a unique touch to any website. It is a footer that has a diagonal or slanted edge, giving it a modern and dynamic look. The slanted footer can be used to display copyright information, social media links, or any other important information.

Tailwind CSS provides a set of pre-defined classes that can be used to create a slanted footer. This makes it easy for beginners to create a slanted footer without having to write any custom CSS. Additionally, Tailwind CSS is highly customizable, allowing developers to create unique designs that match their website's aesthetic.

To create a slanted footer with Tailwind CSS, we'll use a combination of CSS transforms and negative margins. The final result will look something like this:

Free download of the Slanted Footer's source code

To create a slanted footer with Tailwind CSS, we'll use the following HTML and CSS code:

<div class="bg-black">

	<div class="h-32"></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-1/2 lg:w-1/3 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-1/2 lg:w-1/3 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-1/2 lg:w-1/3 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>

Now that we've seen what the final result looks like, let's dive into the process of creating a slanted footer with Tailwind CSS.

Step 1: Create the HTML structure

The first step is to create the HTML structure for the slanted footer. We'll create a footer element and add a div inside it to hold the content of the footer. Here's the code:

<footer class="bg-gray-800">
  <div class="container mx-auto py-8">
    <p class="text-white">Copyright © 2021. All rights reserved.</p>
  </div>
</footer>

Step 2: Apply the slanted edge

To create the slanted edge, we'll use CSS transforms and negative margins. We'll apply a skew transform to the footer element and a negative margin to the content div. Here's the code:

<footer class="bg-gray-800 transform skew-y-3">
  <div class="container mx-auto py-8 transform -skew-y-3">
    <p class="text-white">Copyright © 2021. All rights reserved.</p>
  </div>
</footer>

Step 3: Add padding to the content

Since we applied a negative margin to the content div, we need to add padding to it to ensure that the content is visible. Here's the code:

<footer class="bg-gray-800 transform skew-y-3">
  <div class="container mx-auto py-8 transform -skew-y-3 px-4">
    <p class="text-white">Copyright © 2021. All rights reserved.</p>
  </div>
</footer>

Step 4: Customize the design

Now that we have the basic slanted footer structure, we can customize the design using Tailwind CSS classes. Here's an example of how we can change the background color, font size, and padding:

<footer class="bg-blue-500 transform skew-y-3">
  <div class="container mx-auto py-8 transform -skew-y-3 px-4">
    <p class="text-white text-lg py-2">Copyright © 2021. All rights reserved.</p>
  </div>
</footer>

Conclusion

Creating a slanted footer may seem daunting, but with Tailwind CSS, it's easy to achieve. By using a combination of CSS transforms and negative margins, we can create a unique and modern design that adds a touch of personality to any website. With Tailwind CSS, the possibilities are endless, and we hope this guide has helped you get started on your web development journey.