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, andp-6are 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=
</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
Recommended Articles