JSFiddle - React, Tailwind, and code Playground

by wetali

HTML

<div class="block">
<div class="card">
<div class="blu">
<i class="fa fa-wifi" aria-hidden="true"></i>

</div>
<div class="waid">

  <h1>1000s of Website & Block Templates</h1>
  <p class="title">Customize anything on your website with simple dragging.</p>
  
</div>
</div>

<div class="card">
<div class="waid_1">
<div class="red"><i class="fa fa-tablet" aria-hidden="true"></i>
</div>
  <h1>HTML CSS</h1>
  <p class="title">Select from a huge variety of designer-made templates.</p>

</div>
</div>
<div class="card">
<div class="waid_2">
<div class="grei"><i class="fa fa-television" aria-hidden="true"></i>
</div>
  <h1>No Coding</h1>
  <p class="title">Visually add, edit, move, and modify with no coding!</p>

</div>
</div>
<div class="card">
<div class="waid_1">
<div class="orang"><i class="fa fa-object-ungroup" aria-hidden="true"></i>
</div>
  <h1>Mobile-Friendly</h1>
  <p class="title">Build websites that look great on all modern devices.</p>

</div>
</div>
</div>

CSS

.block {
    width: 100%;
 margin: auto;
}
.card {
margin-top: 120px;
margin-bottom: 60px;
    box-sizing: border-box;
  float: left;
    width: 20%;
  margin-right: 4%;
padding: 1px 40px;
 
}
.waid,.waid_2 {

background: #fff;
    border: 1px solid #eee;
   padding-left: 5px;
    padding-right: 5px;
    width: 200px;
    min-height: 200px;
    line-height: 0;
    -webkit-box-shadow: -9px 8px 6px -5px rgba(34, 60, 80, 0.2);
-moz-box-shadow: -9px 8px 6px -5px rgba(34, 60, 80, 0.2);
box-shadow: -9px 8px 6px -5px rgba(34, 60, 80, 0.2);
  text-align: center;
  font-family: arial;
  position: relative;
 line-height: 1.5;
 
}
.waid_1 {
top: 40px;
background: #fff;
    border: 1px solid #eee;
    padding-left: 5px;
    padding-right: 5px;
    width: 200px;
    min-height: 200px;
    line-height: 0;
    -webkit-box-shadow: 9px 8px 6px -5px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 9px 8px 6px -5px rgba(34, 60, 80, 0.2);
box-shadow: 9px 8px 6px -5px rgba(34, 60, 80, 0.2);
  text-align: center;
  font-family: arial;
  position: relative;
 line-height: 1.5;
 left: 30px;
}
.card h1 {
    margin: 21px 20px 0;
line-height: 1.5;
font-size: 18px;
text-align: center; 
}
.blu {

position: absolute;
z-index: -1;
margin-top: -80px;
background: #4184f4;
    box-sizing: border-box;
   left: 75px;
   width: 233px;
    height: 247px;
 
}
.grei {
position: absolute;
z-index: -1;
margin-top: -80px;
background: #5cb85c;
    box-sizing: border-box;
   left: 24px;
   width: 233px;
    height: 247px;
 
}
.red {
position: absolute;
z-index: -1;
margin-top: -80px;
background: #f15048;
    box-sizing: border-box;
   left: -42px;
   width: 233px;
    height: 247px;

}
.orang {
position: absolute;
z-index: -1;
margin-top: -80px;
background: #fb9056;
    box-sizing: border-box;
   left: -45px;
   width: 233px;
    height: 247px;
    

 
}
.blu .fa {
color: #fff;
  font-size: 52px;
  padding: 18px 1px;
  margin-left: 40px;
}
.red .fa {
color: #fff;
  font-size: 52px;
  padding: 18px 1px;
 ...