JSFiddle - React, Tailwind, and code Playground

by Gerónimo Garcia Sgritta

HTML

<div id="container">    
    <div id="div1">
        <ul class="buttons-sq">
		<li class="red"><a href="#">Remove Credit Card</a></li>            
		<li class="orange ch"><a href="#">Change Card</a></li>
        <li class="gray"><a href="#">Cancel</a></li>		
		</ul>
    </div>
    <div id="div2">
        <h3>Credit Card Linked for Top-Up</h3>
        <div>MasterCard <br/><span>************5100</span></div>
    </div>
</div>

CSS

body {
    background-color: black;
}

#container, #div1, #div2 {
    height: 120px;
    width:320px;    
    position: absolute;
    top:0;
    border: 1px solid red;
}

#container {
    position: relative;
    margin: 10px auto;
    overflow: hidden;
}

#div1 {
    
}

#div2 {
    background-color: white;
    left: 0;
    padding: 0;
}

ul {
    float: right;
    clear: both;
    width: 100%;    
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}

li {
    list-style: none;
    float: right;
    width: 25%;
    padding: 2%;
    font-size: 13px;
    line-height: 1.2em;
    text-align: center;
    vertical-align: middle;
    height: 80px;   
}

.gray {
    background: linear-gradient(to bottom, #fff 0%, #f0f0f1 100%);
    border: 1px solid #ddd;    
}

.orange {
    background: linear-gradient(to bottom, #fe8c43 0%, #ff4b03 100%);
    border-bottom: 1px solid #cf5f2c;
    border-top: 1px solid #cf5f2c; 
}

.red {
    background: linear-gradient(to bottom, #ce2027 0%, #a31c20 100%);
    border: 1px solid #8b171a;
}

JavaScript

var el = document.getElementById("div2"),
    lBound = -280, //Left bound
    rBound = 0, //Right bound
    lastX;

function inRange(x, min, max){
    return x >= min && x <= max;
}

el.style.left = 0;
el.addEventListener('touchmove', function(evt){
    if(!lastX){
        lastX = evt.changedTouches[0].clientX;
        return;
    }
    
    var pos = parseInt(el.style.left),
        delta = lastX - evt.changedTouches[0].clientX,
        newPos = pos - delta;

    console.log('pos: ' + pos);
    console.log('delta: ' + delta);
    console.log('newPos: ' + newPos);
    
    evt.preventDefault();

    if(inRange(newPos, lBound, rBound)){
        el.style.left = newPos + 'px';   
    }           
    
    lastX = evt.changedTouches[0].clientX            
}, false);

el.addEventListener('touchend', function(evt){
    lastX = null;
})