JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <div class="item">
        <div class="photo"></div>
        <div class="text"></div>
    </div>
    <div class="thumbs">
        <span class="thumb"></span>
        <span class="thumb"></span>
        <span class="thumb"></span>
        <span class="thumb"></span>
    </div>
</div>

CSS

.slider{
    position:relative;
    width:600px;
    height:260px;
    background:#000000;
}
.item{
    position:absolute;
    width:600px;
    height:0px;
    overflow:visible;
    z-index:2;
}
.photo{
    position:absolute;
    left:20px;
    top:20px;
    width:270px;
    height:220px;
    background:#bbbbbb;
}
.text{
    position:absolute;
    right:20px;
    top:20px;
    width:270px;
    height:120px;
    background:#bbbbbb;
    background:#bbbbbb;
}
.thumbs{
    position:absolute;
    left:0px;
    bottom:35px;
    width:560px;
    height:70px;
    padding:0px 20px;
    background:#333333;
    z-index:1;
    text-align:right;
}
.thumb{
    display:inline-block;
    width:50px;
    height:50px;
    margin:10px 5px;
    background:#bbbbbb;
    cursor:pointer;
}