JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="rainings">
  <div class="raining">          
    <p><img src="https://www.w3schools.com/images/w3schools_green.jpg" width="277x"></p> 
  </div>     
  <div class="raining">     
   <p><img src="https://www.w3schools.com/images/w3schools_green.jpg" width="277px"></p>
  </div>    
  <div class="raining">    
    <p><img src="https://www.w3schools.com/images/w3schools_green.jpg" width="277px"></p>
  </div>    
</div>
<div class="services">
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    </p>
  </div>    
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    </p>
  </div>    
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    </p>
  </div> 
 </div>

CSS

.service{
    top: 750px;
    background-color: rgba(51,51,51,0.7);
    font-size: 18px;
    color: white;
    width: 250px;
    margin: 1%;
    padding: 1%;
    height: 150px;
    position: absolute;
    clear: both;
}
.service:nth-child(1){
  left: 15%;      
}
.service:nth-child(2){
    left: 39%;
}
.service:nth-child(3){
    left: 63%;
}
.raining{
    top: 500px;
    width: 270px;
    position: absolute;
    clear: both;
}
.raining:nth-child(1){
  left: 16%;      
}
.raining:nth-child(2){
    left: 40%;
}
.raining:nth-child(3){
    left: 64%;
}