JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<div id="container">  
    <div id="carousel">  
        <ul>  
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a1.jpg" /></li> 
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a2.jpg" /></li> 
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a3.jpg" /></li>
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a4.png" /></li> 
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a5.jpg" /></li>
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a6.jpg" /></li> 
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a7.jpg" /></li> 
            <li><img src="http://192.168.34.53/iPad/R&D/amar_nyayapati/jQuery/a8.jpg" /></li>
        </ul>
    </div>  
    <input type="button" value="&lt" id="navPrev" /> 
    <input type="button" value="&gt" id="navNext" /> 
</div> 
<script>
    function navPrev(){
    }
    function navNext(){
    }
</script>

CSS

container{ 
    height:100px; 
    width:500px
}
carousel{
    height:100px; 
    width:500px;
    border:1px solid #000;
    overflow:hidden;
}
#carousel ul { 
    list-style-type:none;
    margin-top:4px; 
    width:2000px; 
    margin-left:0; 
    left:0; 
    padding-left:1px;
}
#carousel li { 
    display:inline;
}
#carousel ul li img{ 
    width:90px;
    height:90px;
    border:1px solid #ccc;
    float:left;
}
#navPrev{
    float:left;
}
#navNext{
    float:right;
}