Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
Let’s rebuild a cookie banner with Tailwind CSS and JavaScript, just like the previous one with Alpine.js.
Cookie banners are more than just a formality; they’re a fundamental part of the user experience on any website that uses cookies. Here’s a closer look at why they’re so crucial:
and many other reasons.
Understanding the code:
id="cookie-banner"
: This is the id of the cookie banner.role="dialog"
: This is the ARIA attribute that will be used to make the cookie banner accessible.aria-labelledby="cookieBannerTitle"
: This is the ARIA attribute that will be used to make the cookie banner accessible.aria-describedby="cookieBannerDesc"
: This is the ARIA attribute that will be used to make the cookie banner accessible.id="accept-cookies"
: This is the id of the button. It is used to identify the button in JavaScript and it will be used to remove the cookie banner.<div id="cookie-banner" role="dialog" aria-labelledby="cookieBannerTitle" aria-describedby="cookieBannerDesc">
<!-- Cookie banner content container -->
<div>
<img src="..." alt="Cookies" />
<h2> Our website uses cookies </h2>
<p> Our website uses cookies. By continuing, we assume your permission to deploy cookies as detailed in our <a href="#">Privacy Policy.</a>
</p>
<!-- Accept cookies button -->
<div class="mt-8">
<button id="accept-cookies"> Accept all cookies </button>
</div>
<!-- Manage cookies link -->
<div>
<a href="#">Manage cookies</a>
</div>
</div>
</div>
document.addEventListener("DOMContentLoaded", () => {
: This is the event listener that will be used to add the event listeners to the cookie banner.const cookieBanner = document.getElementById("cookie-banner");
: This is the code that will be used to get the cookie banner element.const acceptButton = document.getElementById("accept-cookies");
: This is the code that will be used to get the accept button element.acceptButton.focus();
: This is the code that will be used to set the focus on the accept button.acceptButton.addEventListener("click", function() {
: This is the code that will be used to add the event listener to the accept button.cookieBanner.style.display = "none";
: This is the code that will be used to hide the cookie banner when the accept button is clicked.document.addEventListener("DOMContentLoaded", function() {
const cookieBanner = document.getElementById("cookie-banner");
const acceptButton = document.getElementById("accept-cookies");
// Set focus on the accept button once the banner is displayed
acceptButton.focus();
// Hide the cookie banner when the accept button is clicked
acceptButton.addEventListener("click", function() {
cookieBanner.style.display = "none";
});
});
This is a simple cookie banner that can be used for any type of content, such as a product listing, blog posts, news articles, or image galleries. The code is easy to understand and the structure is clear. The use of Tailwind CSS and JavaScript makes it easy to style the cookie banner and add interactivity. Remeber to make it as accessible as possible, and you’re good to go!
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!