Introduction of Cookies Popup Tailwind
Hello guys, we are again here to provide you with our best services with our new and latest project, Cookies Popup Tailwind. Which is made with the help of HTML and Tailwind CSS. In this project, an image of cookies will be given on the card. The heading of cookies will be written, and we will ask you to accept our cookies. We are providing 4-buttons to select as what you want to first for accept all. Second will be of reject, all third will be for preference and last one is to close the tab. This project is very useful, as you have seen this type of cookie on any website. Whenever you visit a website, they sometimes ask you to accept the cookies. We should use cookies because cookies are small files of information. That a web server generates and sends to a web browser.
Let’s start making this project using the code of HTML (Hyper Text Markup Language). Tailwind CSS (this is the framework of CSS used to give the styling to the webpage and make it responsive). This is going to be easy, not very complicated, as everyone can understand it without any problem. If you’ll have to face any doubt, you can contact us through the details given in the footer of the page. I hope this project will be helpful for you all. Follow us step by step.
HTML
First, we will make the structure of this project with the help of HTML (the Hyper markup language used to make the structure of any web page on a website). In this project, we will first make a parent div in which all the details of the card will be inserted. Then make two child divs, one for the heading and information about the cookies and another for the buttons. In the first div, we will insert an image in the img tag (used to insert the image). A heading in the h1 tag (used to give the heading of any topic). Lastly, we will make a paragraph in the p tag (used to write some paragraph). Now we will work on another div in which we will make four buttons in the button tag (which is used to make a button).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>cookies popup tailwind</title>
</head>
<body class="bg-black flex justify-center items-center mt-[200px]">
<section class="fixed max-w-md p-4 mx-auto bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-2xl">
<h2 class="font-semibold text-gray-800 dark:text-white">🍪 We use cookies!</h2>
<p class="mt-4 text-sm text-gray-600 dark:text-gray-300">Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <a href="#" class="font-medium text-gray-700 underline transition-colors duration-300 dark:hover:text-blue-400 dark:text-white hover:text-blue-500">Let me choose</a>. </p>
<p class="mt-3 text-sm text-gray-600 dark:text-gray-300">Closing this modal default settings will be saved.</p>
<div class="grid grid-cols-2 gap-4 mt-4 shrink-0">
<button class=" text-xs bg-gray-900 font-medium rounded-lg hover:bg-gray-700 text-white px-4 py-2.5 duration-300 transition-colors focus:outline-none">
Accept all
</button>
<button class=" text-xs border text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 font-medium rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-none hover:bg-gray-900 hover:text-white">
Reject all
</button>
<button class=" text-xs border text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 font-medium rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-none hover:bg-gray-900 hover:text-white">
Preferences
</button>
<button class=" text-xs border text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 font-medium rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-none hover:bg-gray-900 hover:text-white">
Close
</button>
</div>
</section>
</body>
</html>Tailwind CSS
After making the structure of the project. We will give it some styling and make it responsive by using Tailwind CSS. (this is the framework of CSS used to give the styling to the webpage and make it responsive). We are using Tailwind here because it becomes easier to make any responsive website as compared to normal CSS. In this project, we will first give the background black to the parent div and make all the text white. Now we will move toward the main content of the card. In which we will set the position of the image and heading and adjust the paragraph, then we will set the size and position of the button and give the border to the buttons. When the user hovers over the button, the background color of the button will be affected.
Output of Cookies Popup Tailwind
Finally, we have made this Cookies Popup Tailwind with the help of HTML and Taiwind CSS by following their simple and easy code step by step. I hope you have understood it carefully. You should also make this type of project by taking ideas from here that will enhance your knowledge and improve practice. If you want the source code, then click on the button given below to download it.
For more explanation, click on the link given below to watch.
You can also check:
