JSFiddle - React, Tailwind, and code Playground

by pseudosavant

HTML

<!doctype html>
<html>
    <head>
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;" name="viewport" />
    </head>
    <body>
        <div id="nav">Switch</div>
        <div id="container"><div id="tab1" class="tabs">&nbsp;</div><div id="tab2" class="tabs">&nbsp;</div></div>
    </body>
</html>

CSS

html, body {
    width: 320px; height: 480px;
    overflow: hidden;
    position: relative;
}

#tab1, #tab2{
    width: 280px; height: 480px;
    display: block;
    top: 0;
}

#nav { cursor: pointer; }

#tab1 { background-color: blue; }
#tab2 { background-color: red; }

JavaScript

var tab1 = document.getElementById("tab1");

animateWidth = function(element, size){
    var start = element.clientWidth;
    var end = size;
    var fps = 60;
    var delay = 1000/60;
    
    var width = function(element, size){
       element.style.width = size + "px";
    }
        
    width(tab1, 150);
}