Design a Like and Dislike Toggle Button in Tailwind CSS Last Updated : 01 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The Like and Dislike Toggle in Tailwind CSS is used for gathering user feedback on content, products, or services with better interaction. Creating a like/dislike toggle button with Tailwind CSS, a powerful utility-based framework. It readers through the process of creating customizable toggle buttons, complete with responsive design. Output Preview: Let us have a look at how the final output will look like. PreviewApproach to create Like and Dislike Toggle Button:First, Integrate the Tailwind CSS via CDN Links and create the basic structure of the webpage. Link the Font Awesome CSS for icons.To style various elements such as the body, container, and buttons using classes like bg-gray-100, flex, items-center, justify-center, bg-white, border-2, border-green-500, shadow-md, rounded-lg, w-72, and p-6 are used The JavaScript code selects the like and dislikes buttons using document.querySelector('.like-btn') and document.querySelector('.dislike-btn').Within the event listener functions, classList.toggle() is used to add or remove classes from the like and dislike buttons, toggling their styles between active and inactive states.Example: Illustration of Like and Dislike Toggle 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>Like/Dislike Toggle</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-100"> <div class="flex items-center justify-center h-screen"> <div class="card bg-white border-2 border-green-500 shadow-md rounded-lg w-72 p-6"> <h2 class="text-xl font-semibold mb-2"> GeeksforGeeks </h2> <p class="text-gray-600 mb-4"> A computer Science Portal for Geeks </p> <div class="flex justify-between"> <div class="like-btn flex items-center justify-center w-12 h-12 rounded-full bg-gray-200 cursor-pointer transition duration-300 ease-in-out"> <i class="fas fa-thumbs-up text-gray-500 text-xl"> </i> </div> <div class="dislike-btn flex items-center justify-center w-12 h-12 rounded-full bg-gray-200 cursor-pointer transition duration-300 ease-in-out"> <i class="fas fa-thumbs-down text-gray-500 text-xl"> </i> </div> </div> </div> </div> <script> let likeBtn = document.querySelector('.like-btn'); let dislikeBtn = document.querySelector('.dislike-btn'); likeBtn.addEventListener('click', function () { likeBtn.classList.toggle('bg-green-500'); likeBtn.classList.toggle('text-white'); likeBtn.classList.toggle('transform'); likeBtn.classList.toggle('scale-110'); likeBtn.classList.toggle('rotate-180'); likeBtn.innerHTML = likeBtn.classList .contains('bg-green-500') ? '<i class="fas fa-thumbs-down text-white text-xl"></i>' : '<i class="fas fa-thumbs-up text-gray-500 text-xl"></i>'; dislikeBtn.classList .remove('bg-red-500', 'text-white', 'transform', 'scale-110', 'rotate-180'); dislikeBtn.innerHTML = '<i class="fas fa-thumbs-down text-gray-500 text-xl"></i>'; }); dislikeBtn.addEventListener('click', function () { dislikeBtn.classList.toggle('bg-red-500'); dislikeBtn.classList.toggle('text-white'); dislikeBtn.classList.toggle('transform'); dislikeBtn.classList.toggle('scale-110'); dislikeBtn.classList.toggle('rotate-180'); dislikeBtn.innerHTML = dislikeBtn.classList .contains('bg-red-500') ? '<i class="fas fa-thumbs-up text-white text-xl"></i>' : '<i class="fas fa-thumbs-down text-gray-500 text-xl"></i>'; likeBtn.classList .remove('bg-green-500', 'text-white', 'transform', 'scale-110', 'rotate-180'); likeBtn.innerHTML = '<i class="fas fa-thumbs-up text-gray-500 text-xl"></i>'; }); </script> </body> </html> Output : Output Comment More infoAdvertise with us Next Article Design a Like and Dislike Toggle Button in Tailwind CSS M maha123 Follow Improve Article Tags : Web Technologies CSS Tailwind CSS Similar Reads How to Skew a Button in Tailwind CSS? Skewed buttons can add a dynamic and modern look to your website, Tailwind CSS provides utility classes to easily apply 2D transformations like tilt, rotation, and scaling, we'll explain how to tilt, buttons using Tailwind CSS and create a simple project to demonstrate this.Approach To Skew A Button 2 min read How To Make A Button Linear Gradient Color Border In Tailwind CSS? Creating visually appealing buttons can significantly enhance the user interface of your web application. One popular design trend is the use of linear gradient borders. In this article, we'll explore how to make a button with a linear gradient color border using Tailwind CSS.A button with a linear 2 min read How to Ceate Swipe-able Button in Tailwind CSS and React? Creating swipe-enabled buttons in React applications can greatly improve user experience, especially on mobile devices, these buttons are typically used for actions like deleting, sharing, and liking items, in this article we'll show you how to create a swipe-enabled button using Tailwind CSS for st 3 min read How to add a style on a condition in Tailwind CSS ? In this article, we will see how to integrate conditional styling into our web projects using Tailwind CSS. There are various Tailwind CSS classes are available, although, it usually involves dynamically adding or removing classes using JavaScript. There are different approaches to implementing the 3 min read How to display button on hover over div in Tailwind CSS ? Tailwind CSS provides a huge number of CSS utility classes that allow you to quickly apply to style and easily construct custom designs. In this article, we’ll see how to display the button when hovering over the div in TailwindCSS.Example 1: Create a <div> element and apply group and relative 2 min read Like