How to create Cookies Message Popup Template in Tailwind CSS ?

Last Updated : 12 Mar, 2024

The popup informs users about the website’s use of cookies and provides options for cookie preferences. The simple and functional cookie message Popup where users can either accept all cookies or customize their settings by clicking on the respective buttons. The Tailwind CSS classes are used to style various elements. These classes enable quick and efficient styling, making the interface responsive to different screen sizes.

Approach to Create Cookies Message Popup Template in Tailwind

Integrate the Tailwind CSS via CDN Link in an HTML file. Inside body, there is a div element with Tailwind CSS classes for styling.
The popup is positioned fixed at the bottom of the viewport with some offset using Tailwind CSS classes (fixed bottom-20 left-1/2 transform -translate-x-1/2).
The content of the popup includes a heading, a paragraph explaining the use of cookies, and two buttons for accepting all cookies or customizing settings.
In JavaScript the acceptCookies() function is called when the “Accept All Cookies” button is clicked. It displays an alert message saying “Cookies accepted!”.
The function showSettings() is called when the “Customize Settings” button is clicked. It displays an alert message saying “Customize settings page will be displayed.”

Example: Illustration of Designing a Cookies Message Popup Template in Tailwind CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Cookies Message Popup</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="fixed bottom-20 left-1/2 transform -translate-x-1/2 
                bg-black bg-opacity-80 text-white px-6 py-8 rounded-lg
                max-w-md w-11/12">
        <h2 class="text-2xl font-semibold mb-4">
              Cookies Message Popup
          </h2>
        <p class="text-lg mb-6">
          This website uses cookies to ensure you get the
          best experience on our website.
          </p>
        <button class="bg-green-500 text-white px-6 py-3 rounded-md
                       mr-4 transition-colors hover:bg-green-600 
                       focus:outline-none"
                   onclick="acceptCookies()">
              Accept All Cookies
          </button>
        <button class="bg-gray-700 text-white px-6 py-3 rounded-md
                       transition-colors hover:bg-gray-800 
                       focus:outline-none"
                onclick="showSettings()">
          Customize Settings
          </button>
    </div>
    <script>
        function acceptCookies() {
            alert("Cookies accepted!");
        }
        function showSettings() {
            alert("Customize settings page will be displayed.");
        }
    </script>
</body>

</html>

Output: