JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div class="slider">
<div class="slide">

<ul class="phlist">
<li><img class="photos" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/c/c1/Bottlenose_Dolphins.jpg/revision/latest/scale-to-width-down/320?cb=20071018002642"/></li>
<li><img class="photos" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTJHWFmU0sbfOOcbVkLMEvLSC1lAmramIvLQDmYbTaOg8EfYRBCkQ"/></li>
<li><img class="photos" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRDWspf3omor-fZ4x-XIuOueXKJzdUn4QDA5aV_GIfncC9Au3DwAg"/></li>

</ul>


</div>
</div>

</body>

CSS

*
{
    margin : 0 ;
    padding : 0
}


html, body
{
    height : 100% ;
    width : 100% 
}

.slider
{
    width : 100% ;
    height : 100% ;
    position : relative ;
    padding : 0 ;
    margin : 0 ;
    background : green

}

.slide
{
    background-color : #FAFAFA ;
    width : 30% ;
    margin : auto ;
    height : 25% ;
    min-height: 180px;
    position : relative ;
    top : 30% ;
    right : 0 ;
    left : 0 ;
    bottom : 0
}

.slide ul
{
    list-style : none ;
}

.slide ul li
{
    position : absolute ;
    left : 18% ;
    right : 18% ;
    top : 16%   
}

ul li img.photos
{
    width : 100% 
}