Home
Omer fils ELENGA
Avant & Après

Avant & Après

This tailwind example is contributed by Omer fils ELENGA, on 30-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid

Header Image gallery Range Slider

Author Omer fils ELENGA

297

Fork Fullscreen

<link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />

/* Style personnalisé pour le slider Avant/Après */
    .compare-slider {
      position: relative;
      display: block;
      width: 100%;
      max-width: 768px;
      height: auto;
      margin: 0 auto;
    }
    .compare-before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      overflow: hidden;
      border-radius: 0.75rem;
      pointer-events: none;
    }
    .compare-before img {
      width: 200%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .compare-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background: rgba(255, 255, 255, 0.8);
      cursor: ew-resize;
      transform: translateX(-50%);
      z-index: 10;
    }
    .compare-handle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .compare-handle::before svg {
      width: 16px;
      height: 16px;
      color: #333;
    }
  </style>
    
    
            <section class="flex flex-col gap-4 px-4 py-10">
              <div class="text-center max-w-2xl mx-auto">
                <h2 class="text-[#0c141d] dark:text-slate-50 text-3xl font-bold">Nos Résultats : Avant &amp; Après</h2>
                <p class="text-slate-700 dark:text-slate-300 mt-2">
                  Voyez la différence que notre expertise peut faire. Nous transformons les espaces infestés en environnements propres et sûrs.
                </p>
              </div>

<div class="compare-slider" id="compareSlider">
                <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuALlkx-IObwjMGna31eLEFzEHeD0qTM1jHGm5S-McRZvZIS7YAaAcBgKe_bg0p8JLLeycTYMb15ESdXFjv33aqtMkd1F1x0KTbcwJhXWyVf4gnFEV7sTtSKTgYX-hvZyxNbT_z6JjyDeDBzqLr2CqxJlbhSiV1l-VTQ-RatYXgUG7zxe3InOdgXgFVb25_fLf2SiMb2yqDWiENEpHV6NmdXbTThxWNIUDSYszLhUOLGYkw0rFCHypqGQCFPzFAMX8Q_cRLGdqMex8M" alt="Après désinfection – cuisine propre et saine" class="w-full rounded-xl" />
                <div class="compare-before" id="compareBefore">
                  <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5Q8F7AEduUTC-RyyhnMAg5lVaVU0STX1wR0g02O-qe_LPcXQ0cumksZsj2vuS0HH7jZhs_hNc2_Fw-yJ9JCmgWxcuvgFf4VO0XbX6w_7-svqucVT9IhcHwtX1_fqq7WTxpV3mllwEE1gB8kGhKXgYc4_sNJjT1HmbCOfmdStfxWUYHwiAAtBf8e4A9WP_munuiHi-sSTrEJ5BLeZL_yltx7AMbyK3Mq5Hk1HRsrxfzeH9PRc91GoToEz55xpCe9MTYQ2ttnr6REw" alt="Avant traitement – coin de cuisine infesté" />
                </div>
                <div class="compare-handle" id="compareHandle">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M8 9l4-4 4 4m0 6l-4 4-4-4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
              </div>
            </section>

<script>
      document.addEventListener('DOMContentLoaded', () => {
        const slider = document.getElementById('compareSlider');
        const before = document.getElementById('compareBefore');
        const handle = document.getElementById('compareHandle');

if (!slider) return;

let isActive = false;

const onMouseDown = (e) => {
          isActive = true;
          updatePosition(e.clientX);
        };

const onMouseMove = (e) => {
          if (!isActive) return;
          e.preventDefault();
          updatePosition(e.clientX);
        };

const onMouseUp = () => {
          isActive = false;
        };

const onTouchMove = (e) => {
          if (!isActive) return;
          e.preventDefault();
          updatePosition(e.touches[0].clientX);
        };

handle.addEventListener('mousedown', onMouseDown);
        window.addEventListener('mousemove', onMouseMove);
        window.addEventListener('mouseup', onMouseUp);

handle.addEventListener('touchstart', (e) => {
          isActive = true;
          updatePosition(e.touches[0].clientX);
        });
        window.addEventListener('touchmove', onTouchMove);
        window.addEventListener('touchend', onMouseUp);
      });
    </script>

Related Examples

Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Author:
Prajwal Hallale

2 years ago

10.6k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.9k
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

2 years ago

10.1k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.5k
App Hero Section With header

Author:
Abdul Baset Bappy

7 months ago

1.1k
Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

11 months ago

2.1k
Yvette
it's very good

Author:
Umutoniwase Yvette

8 months ago

711
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

8 months ago

1.6k
Header + simple Hero Section

Author:
ABDO-SY

11 months ago

2.1k
Gallery
Gallery

Author:
Aman kumar

1 year ago

3.5k
home page

Author:
Omer fils ELENGA

2 weeks ago

141
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

576

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components