JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel ="stylesheet" href ="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
<div class="main">
<i class="fas fa-tint"></i>
<h1>Experience</h1>
<p>While our team is not that big, their totaling experience is so huge, that they fix plumbing issues just by looking at them! </p>
</div>
<div class="main">
<i class="fas fa-key"></i>
<h1> Tools</h1>
<p> We have all the industry standard tools and we’re regularly updating our stock with the latest plumbing equipment!</p>
</div>
<div class="main">
<i class="far fa-thumbs-up"></i>
<h1>Accessibility</h1>
<p>Everyone knows, how hard it is to find a plumber in Wyoming during winter. As opposed to that notion, we work 24/7/365, all year long… </p>
</div>
<div class="main">
<i class="far fa-lightbulb"></i>
<h1>Affordability </h1>
<p> We’re convinced, that any good service simply must be also an affordable service. That is why we always keep our pricing at bay.</p>
</div>
</body>
</html>
CSS
body {
background-color:white;
}
.main {
background:rgba(254, 255, 255, 0.5);
color: white;
width: 220px;
height: 500px;
float: left;
margin-left: 20px;
}
.main div{
width: 220px;
height: 200px;
float: left;
margin-right: 20px;
}
.fas fa-tint{
color:#99ceef;
font-size: 30px;
}
.fas-fa-key{
color:#99ceef;
font-size: 56px;
text-align: center;
}
far fa-lightbulb{
}
h1{
background-color: white;
color:#99ceef;
text-align: center;
}
p{
background-color: white;
color:#343737d1;
text-align:center;
}
.main:hover{
background:#99ceef ;
}
.main:hover h1{
color: white;
}
.main:hover p{
color: white;
}