JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <ul>

        <li>
          <div class="inner">
            <a href="#"><img src="eg1.jpg" /></a>
            <br />
            EG1 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg2.jpg" /></a>
            <br />
            EG2 lorem ipsum
           </div>
        </li>
        <li>
          <div class="inner">
            <a href="#"><img src="eg1.jpg" /></a>
            <br />
            EG1 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg2.jpg" /></a>
            <br />
            EG2 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg1.jpg" /></a>
            <br />
            EG1 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg2.jpg" /></a>
            <br />
            EG2 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg1.jpg" /></a>
            <br />
            EG1 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg2.jpg" /></a>
            <br />
            EG2 lorem ipsum
           </div>
        </li>


</ul>

</div>

CSS

.outer{
    width:400px;
    overflow:auto;
    white-space:nowrap;
}
.outer li{
    display: inline-block;
    *display: inline;/*For IE7*/
    *zoom:1;/*For IE7*/
    vertical-align:top;
    width:40px;
    margin-right:20px;
    background:red;
    white-space:normal;
}