JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="box"></div>

CSS

div#box {
    width: 100%;
    height: 400px;
    background: red;
}

JavaScript

var fn = function(){
	var start;
	var a = document.querySelector('#box');
    a.addEventListener('mousedown',function(e){
    	this.classList.add('active')
        start = e.pageX;
    })
    a.addEventListener('mouseup',function(){
    	this.classList.remove('active')
    })
    a.addEventListener('mousemove',function(e){
    	if(a.classList.contains('active')){
    		a.style.transform = 'translateX(' + (e.pageX - start) + 'px)'
        }
    })
    requestAnimationFrame(fn)
}
fn()