JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <div class="carousel">
        <ul>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="1"></a>
            </li>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="2"></a>
            </li>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="3"></a>
            </li>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="3"></a>
            </li>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="3"></a>
            </li>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="3"></a>
            </li>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="3"></a>
            </li>
            <li><a href="#"><img src="http://lorempixum.com/50/50" title="#titulo_libro"  alt="3"></a>
            </li>
        </ul>
    </div>
</div>

CSS

.slider {
       float: left;
       margin-left: 3em;
   }
   .carousel {
       float: left;
       width: 68.75%;
       /*72.916666667%;*/
       background: #CCCCCC;
       height: 210px!important;
       position: relative;
       /* DOES NOT WORK */
   }
   .carousel ul li {
       width: 100px;
       height: 200px;
       border: 1px solid black;
       position:relative;
       display: table-cell;
       padding-right: 0.75em;
   }
   .carousel ul li img {
       position: absolute;
       /* DOES NOT WORK */
       bottom: 0;
       /* DOES NOT WORK */
   }