JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="icon2"><img src="page1_img2.jpg" alt=""><span>A.</span></div>
<h2> Partnership <br> Programs</h2>
<p>Praesent vestibulum aenean nonummy hendrerit mauris.Cum sociis natoque penatibus et magnis dis.
  <br><a href="more"> READ MORE </a></p>
 </div>

  <div class="main">
  <div class="icon3"><img src="page1_img3.jpg" alt=""><span>A.</span></div>
<h2> Business <br> Analvsis</h2>
<p>Praesent vestibulum aenean nonummy hendrerit mauris.Cum sociis natoque penatibus et magnis dis.
  <br><a href="more"> READ MORE </a></p>
 </div>

  <div class="main">
  <div class="icon4"><img src="page1_img4.jpg" alt=""><span>A.</span></div>
<h2> Support <br> Center</h2>
<p>Praesent vestibulum aenean nonummy hendrerit mauris.Cum sociis natoque penatibus et magnis dis.
  <br> <a href="more"> READ MORE </a></p>
 </div>
</body>
</html>

CSS

body {
  background-color:#99ceef;

}
.main {
  background:rgba(56, 154, 193, 0.5);
 
  color: blue;
  width: 220px;
  height: 500px;
  float: left;
  margin-left: 20px;
}
.main div{

  width: 220px;
  height: 200px;
  float: left;
  margin-right: 20px;
  background-repeat: no-repeat;
}

.icon1{
  background: url(../images/page1_img1.jpg);
  width: 220px;
  height: 200px;
}
.icon2{
  background: url(../images/page1_img2.jpg);
   width: 220px;
  height: 200px;
}
.icon3{
  background: url(../images/page1_img3.jpg);
   width: 220px;
  height: 200px;
}
.icon4{
  background: url(../images/page1_img4.jpg);
   width: 220px;
  height: 200px;
}
.main span{
  background-color: white;
  color:#99ceef;
  display: block;
  margin-left:78px;
  margin-top:90px;
  height: 60px;
  width: 60px;
  line-height: 60px;
  border-radius:30px;
  font-size: 1.8em;
  text-align:center;
  

}
h2{
 
  text-align:  center;
  color:white;
}
p{
  margin-left:1em ;
  margin-bottom:6em;
  margin-right:1em ;
  text-align:  center;
  color:white;
}

  a{
  margin-top:5em; 
  text-align:  center;
  color:white;
  text-decoration:underline
 }



.main:hover{
  background: white;
}

.main:hover h2{
   color: #99ceef;
}
.main:hover p{
  color: #99ceef;
}
.main:hover a{
  color: #99ceef;
}
.main:hover span{
  background-color:#99ceef;
  color:white;
}