JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideshow">
    <div class="slide-1">
 <a href="#"><img src="img/01.jpg"></a>
 <div class="info-slide-left">

   <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>    

 </div>
</div>

<div class="slide-2">
 <a href="#"><img src="img/img02.jpg"><a/>
 <div class="info-slide-rigth">

   <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>

 </div>
</div>

<div class="slide-3">

 <a href="#"><img src="img/img02.jpg"></a>
 <div class="info-slide-right-3">

   <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>

 </div>
</div></div>

CSS

.slideshow{
    width:100%;
    max-width:300px;
    overflow:hidden;
    height:auto;
    margin:0 auto;
}

.slide{
    width:100%;
    height:auto;
    display:block;
}

.slide-1{
    width:80%;
    height:505px;
    float:left;
    background: #e3e3e3;
}

.slide-2{
    width:20%;
    height:250px;
    float:left;
    background: #f1f1f1;
}

.slide-3{
    width:20%;
    height:250px;
    float:left;
    background: #ccc;
}

.slide-1 img{
    width:635px;
    height:500px;
}