JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

<div class="image-slider">
    <div class="image-before">
        <img src="https://i.imgur.com/1oebV2D.png" alt="">
    </div>
    <div class="image-after">
        <img src="https://i.imgur.com/bTrVG20.png"  alt="">
    </div>
</div>

SCSS

$img-size: 300px;
$button-size: 6px;

img {
    width: $img-size;
}

.image-slider {
    position: relative;
}

.image-before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2 * $button-size;
    max-width: $img-size;
    overflow: hidden;
    resize: horizontal;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
    }

    &::before {
        top: 0;
        width: 2px;
        background-color: #fff;
    }
    
    &::after {
        width: 0;
        height: 0;
        border: $button-size solid transparent;
        border-right-color: #fff;
        border-bottom-color: #fff;
        cursor: ew-resize;
    }
}