JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div id="box">
    <ul>
        <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
        <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
        <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
        <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
              <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
                    <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
                          <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
        <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
        <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
        <li><img src="http://www.baidu.com/img/270_c37d1daa1277091e80953b49997eb6ff.gif" alt="" width="200px"></li>
    </ul>
</div>

CSS

* {
    margin:0;
    padding:0;
}
ul ,li {
    list-style:none;
}
#box {
    width:800px;
    overflow:hidden;
}
ul {
    overflow:auto;
    white-space:nowrap;
    font-size:0;
}
li {
    display:inline-block;
    
}