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="page1_img1.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{
  width: 220px;
  height: 200px;
  float: left;
  margin-right: 10px;
  background-repeat: no-repeat;
}

.icon1{
  background: url(../images/page1_img1.jpg);
}
.icon1 span{
  text-align:center;
  background: white;
  color:#99ceef;
  padding-top: 15px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;

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