JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<div id="mcs5_container"> 
    <div class="customScrollBox"> 
        <!-- horWrapper div is important for horizontal scrollers! --> 
        <div class="horWrapper"> 
            <div class="container"> 
                <div class="content"> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb1.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb2.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb3.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb4.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb5.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb1.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb2.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img src="images/featured_thumb3.jpg" width="150" height="150" alt="" class="fpic" /></a> 
                    </div> 
                    <div class="featured_item"> 
                        <a href="#"><img...

CSS

/* ---- Slider Gallery ---- */

.content_wrapper_sbl #content #mcs5_container,
.content_wrapper_sbr #content #mcs5_container,
.content_wrapper #content #mcs5_container {
    height:320px;
    position:relative;
    margin:0;
    background:#fff;
    border:1px solid #cccccc;
    border-radius:6px;
    -moz-border-radius:6px;
    -khtml-border-radius:6px;
    -webkit-border-radius:6px;
}

.content_wrapper #content #mcs5_container {
    width:960px;
}

.content_wrapper_sbl #content #mcs5_container,
.content_wrapper_sbr #content #mcs5_container {
    width:640px;
}

.content_wrapper_sbl #content #mcs5_container .customScrollBox,
.content_wrapper_sbr #content #mcs5_container .customScrollBox,
.content_wrapper #content #mcs5_container .customScrollBox {
    position:relative;
    overflow:hidden;
}

.content_wrapper #content #mcs5_container .customScrollBox {
    width:960px;
}

.content_wrapper_sbl #content #mcs5_container .customScrollBox,
.content_wrapper_sbr #content #mcs5_container .customScrollBox {
    width:640px;
}

#mcs5_container .customScrollBox .horWrapper{
    position:relative;
    left:0;
}

#mcs5_container .customScrollBox .container{
    height:300px;
    position:relative;
    left:0;
    display:inline-block;
    *display:inline;
}

#mcs5_container .customScrollBox .content{
    clear:both;
}

#mcs5_container .customScrollBox .content .featured_item{
    width:150px;
    height:260px;
    float:left;
    padding:30px 21px 30px;
    border-right:1px solid #cccccc;
}

#mcs5_container .customScrollBox .content .featured_item a{
    width:150px;
    height:auto;
    display:block;
}

.content_wrapper_sbl #content #mcs5_container .customScrollBox .content .featured_item,
.content_wrapper_sbr #content #mcs5_container .customScrollBox .content .featured_item {
    padding:30px 32px 30px;
}

#mcs5_container .customScrollBox .content .fpic{
    width:150px;
    height:150px;
    margin-bottom:10px;
    border-bottom:1px solid #d7d7d7;
}

#mcs5_container...