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
, andp-6
are used - The JavaScript code selects the like and dislikes buttons using
document.querySelector('.like-btn')
anddocument.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" > w3wiki </ 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 :
Design a Like and Dislike Toggle Button in Tailwind CSS
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.