JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" lang=ru>
    <link rel=stylesheet href="main.css">
      <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
    <title>not him</title>
   <body>
     <h3>Why this is awesome</h3>
       <p class="line"></p>
       <p class="pod">Lorem ipsun dolor sit amet, consectetur adipiscing elit.</p>
       <div class="advantages flex">
           
       <span>
           <img src="lampochka.png" class="advantages flex"><p>
           <b>Thodghful design</b></p></span>
       <span><img src="klaviatura.png" class="advantages flex"><p><b>Well Crafted</b></p></span>
           <span><img src="molniya.png" class="advantages flex"><p><b>Easy to Customize</b></p>
           </span>
           </div>
       
   </body>   
  </head>
</html>

CSS

.podpis {font-size: 1px;}

h3 {text-align: center;
font-size: 35px;
margin-top: 15%;
margin-bottom: 
font-family: 'PT Sans', sans-serif;}

.line {
  background-color: orange;
  height: 3pt;
  margin-left: 47%;
  margin-right: 47%;
    margin-top;
}
.pod {font-size: 20px;
    color: lightgray;
text-align:center;
margin-top: 2%;}

.blocks {
float: left;
display: inline;
}


.flex { display: flex; }
.advantages { justify-content: space-around; }

div {margin-top: 5%;}

img {margin: auto;}

b {color: black;
font-size: 26px;}

p {max-height: 30%}