JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<input id="input1" type="radio" name="radio-set" />
<input id="input2" type="radio" name="radio-set" />


<div id="wrapper">

    <div id="content">
                    
        <img src="http://www.ollis-3d-welt.de/3dwelt1.jpg"/>
        <img src="http://1.bp.blogspot.com/_op2hrGedNZs/Sgqo0VpPQ3I/AAAAAAAASSI/qsp53_F7U1U/s400/Wario3D.jpg"/>
    
    </div>

</div>

CSS

#wrapper{
    width:400px;
    height:200px;
    border:4px solid red;
      overflow:hidden; 
}

#content{
 height:100%;
width:1000px;
 background:black;
overflow:hidden;     
}
img{
 height:100%;   
    margin-right:100px;
    float:left;
}

input#input1:checked ~ div#wrapper >#content{
margin-left:-400px;
    -webkit-transition: all 500ms ease-out;
}