Create Side-by-Side Image Comparison In Tailwind CSS Last Updated : 04 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report CSSA side-by-side image comparison feature allows users to compare two images: showcasing "before" and "after" states. This technique is widely used in various fields such as web design, photography, e-commerce, etc. We can also use this technique to highlight differences or improvements between two images.PrerequisitesHTMLCSSTailwind CSSApproach To Create Side-by-Side Image ComparisonFirst, create a basic HTML structure, and in the <head> section, set the character encoding to "UTF-8" and include the viewport meta tag to make the website responsive.Then include the Tailwind CSS CDN link in the <head> section using the <script> tag.After that use the tailwind CSS to "grid" class to place the two images side by side, this "grid" class is used for a flexible, responsive structure.You can also use those Tailwind CSS utility classes like: "rounded-lg", "shadow-lg", "gap-8", and "text-3xl" for rounded corners, shadows, and proper gap and text size.Example: The example code below shows how to Create side-by-side image comparison using tailwind CSS HTML <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Side-by-Side Image Comparison</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-100 flex justify-center items-center min-h-screen"> <div class="w-6/12 p-6 bg-white rounded-lg shadow-lg"> <h1 class="text-4xl font-bold text-center text-blue-800 mb-8"> Side-by-side image comparison in tailwind css</h1> <div class="relative w-full max-w-5xl mx-auto h-96 overflow-hidden rounded-lg shadow-lg"> <!-- Before Image --> <img src="https://media.geeksforgeeks.org/wp-content/uploads/ 20240322101847/Default_An_illustration_depictin-(2)-660.jpg" alt="Before Image" class="absolute top-0 left-0 w-full h-full object-cover rounded-lg z-10 transition-all duration-500 ease-in-out"> <!-- After Image (controlled by slider) --> <div class="absolute top-0 left-0 h-full rounded-lg shadow-lg z-20" id="afterImageContainer" style="width: 50%;"> <img src="https://media.geeksforgeeks.org/wp-content/uploads /20240322101847/Default_An_illustration_depictin-(2)-660.jpg" alt="After Image" class="absolute top-0 left-0 w-full h-full object-cover transition-all duration-500 ease-in-out"> </div> <input type="range" min="0" max="100" value="50" class="absolute bottom-0 w-full z-30 opacity-100" id="slider"> </div> <div class="grid grid-cols-2 gap-8 mt-4"> <div class="text-center"> <h2 class="text-4xl font-semibold text-green-700">Before</h2> </div> <div class="text-center"> <h2 class="text-4xl font-semibold text-green-700">After</h2> </div> </div> </div> <script> const slider = document.getElementById('slider'); const afterImageContainer = document.getElementById('afterImageContainer'); slider.addEventListener('input', function () { afterImageContainer.style.width = `${slider.value}%`; }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Create a User profile card in Tailwind CSS S skaftafh Follow Improve Article Tags : CSS Similar Reads Create a Responsive Image Carousel in Tailwind CSS Image Carousel is a UI element that acts like a slideshow by cycling through different images. You can easily design a Carousel in Tailwind CSS by using anchor tags along with proper width, height, and overflow properties. The Carousel can also be made responsive using the Tailwind responsive utilit 2 min read How to create Image Comparison Slider using CSS ? In this article, we will see how to create an Image Comparison Slider using CSS. The Image Comparison Slider essentially aids in the distinction of two photographs or products. As a result, the user can quickly determine which of the two products or two images in a better way.Approach: The approach 2 min read Create Image Slider on Hover in Tailwind CSS This article aims to demonstrate How to create an Image Slide on Hover Effect using Tailwind CSS. The idea behind this is that when user hovers the cursor over the given image, it smoothly slides out of view, revealing additional content or providing an interactive experience.Image Slide on Hover Ef 2 min read Create an Image Gallery to view it in a Modal in Tailwind CSS Modals are like pop-up windows that show content without navigating away from the page. By putting your image gallery in a modal, you give visitors a clear view of your images without any distractions. With Tailwind CSS, you can quickly set up and customize modal-based image galleries, making your w 3 min read Create a User profile card in Tailwind CSS User profile cards are a common UI element used to display information about an individual in a visually appealing way. These cards are often utilized on social media platforms, blogs, and various other websites. In this article, we'll explore a simple approach to creating a user profile card using 2 min read How to Add Rounded Corners to an Image in Tailwind CSS ? Adding rounded corners to an image in Tailwind CSS is an easy way to make your pictures look nicer. Instead of having sharp corners, you can give them smooth, rounded edges. Tailwind CSS has simple classes that let you choose how rounded the corners are, whether just a bit or completely round. Appro 3 min read Like