JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel ="stylesheet" href ="css/style.css">
</head>
	
  <body>
    <div class="main">
      <div class="icon1">
        <img src="https://htmlforum.io/uploads/monthly_2019_05/page1_img1.thumb.jpg.7d8b468cc04934506966d9b992cc3132.jpg" alt="">
        <span>A.</span>
     </div>
     <h2> Money Saving <br> Ideas</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: 10px;
}
.main div{
  position: relative;
  width: 220px;
  height: 200px;
  margin-bottom: 30px;
  float: left;
  background-repeat: no-repeat;
}

.icon1{
  background: url(../images/page1_img1.jpg);
}
.icon1 span{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  display: block;
  width: 40px;
  height: 40px;
  text-align:center;
  background: white;
  color:#99ceef;
  border-radius: 50%;
  line-height: 40px;
}

.icon1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

a{

  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;
}