Design a Like and Dislike Toggle Button in Tailwind CSS

Last Updated : 01 Mar, 2024

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.

Preview

Approach 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>