JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<!-- Search -->
<input type="text">
<!-- Main -->
<div id="main">
    <img src="http://placehold.it/600x400&text=Main" alt=""/>
</div>
<!-- Sub -->
<div id="sub">
    <p>
        <button class="button left"><</button>        
    </p>
    <ul class="slider">
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
        <li><img src="http://placehold.it/140x80&text=Sub" alt=""/></li>
    </ul>
    <p>
        <button class="button right">></button>        
    </p>
</div>

CSS

#sub .slider{
    margin: 0px;
    padding: 0px;
}
#sub .slider li{
    display: inline;
}