JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

    <head>

<meta charset="utf-8">

      <title> Аренда строительной техники </title>

                      <link type="text/css" rel="stylesheet" href="cssTe.css"/>
<meta name=viewport content="width=device-width, initial-scale=1">

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

</head>
  
    <body>


  
<!--<DIV class="pik2"></DIV>-->

        <div class="logo"> 

                            <div class="logo2">         
        <h2>Аренда строительной техники</h2>
        <p>Земляные работы. Рытье котлованов. Вывоз мусора.</p>  
                                        </div>
           
           
           <div id="nomer">
            
            <h2> 495-555-55-55 <br>
                 926-655-55-55   
                   </h2>
                                                   
                                    
                      </div>

                </div>

<div class="gla">

<div class="pic">    </div>

<div id="fonb"> <h1>Каждый второй куб в подарок при заказе на сайте </h1></div>


</div>
   
        <header class="line1">
        
            <h1>Аренда техники</h1> 
        
        </header> 






<div id="conte">
    <div id="cell">
        
        <section class="kran">

            <span class="kran12 textP">
            
            <h2>Автокран Ивановец 25 Т</h2>
                <p>Стрела 25 мет.</p>
            <p>Грузоподёмность 25 тонн.</p>
            <p>Собственник-насальник.</p>
            <p>Цена за смену(8ч)<span class="red12">590 000 руб</span></p>
            
            </span>
            
            
        </section>
        
                    <section class="manipu">
            
                       
                       <span class="manipu12 textP">
                       
                        <h2>Манипулятор Камаз 5 Т</h2>
            
                        <p>Грузоподъёмность 3 тонны</p>
          ...

CSS

body {
    margin:  0 auto;
    padding: 0;
    background-color:  #f2f2f2;
    font-family: sans-serif;
  
   min-width: 1200px; 
}






.logo, p {
    font-family: Roboto;
    
    margin: 0 200px 0 0;
}

.logo2 {
    text-align: left;
    margin-left: 200px;
    
}

.pik2 {
    position: absolute;
    background-image: url(imag/03.png); 
    background-repeat: repeat;    
    width: 1200px;
    height: 600px;
    z-index: -3;
    
}

#nomer {
  float: right;
  margin: -100px 0 0 0;  
}


.gla {
    margin: 0 auto;
    position: relative;
    
}


.pic {
    background-image: url(imag/Back.jpg);
    width: 899px;
    height: 431px;
    border-radius: 10px;
    margin: 0 auto;
    
}

#fonb {
    position: absolute;
    display: block;
    border-radius: 17px;
    background-color: #231f20;
    height: 250px;
    width: 700px;
    opacity: 0.9;
    margin:  -27% 0 0 20%;
}

#fonb h1 {
    
    color: yellow;
    width: 100%;
    text-align: center;
    
    /*position: absolute;
    padding-left: 3%;
    */
}


.line1 {
    position: relative;
    text-align: center;
    border-top: solid 1px #ccc;
    top: 1em;
    margin-top: 25px;
}
.line1 h1 {
    background: #f2f2f2;
     position: relative;
    top: -0.65em;
    display: inline;
    margin: 0 ;
    padding: 0 1em 0 1em;
    
}


#conte {
    display: table;
    margin-top: 25px;
    border-spacing: 22px;
    margin: 0 auto;
}


#cell {
    display: table-row;
    
    
    
}

.kran, .manipu, .buld {
    background-repeat: no-repeat;
    border-radius: 8px ;
    display: table-cell;
    
}




.kran12, .manipu12, .buld12 {
    display: block;
    margin-top: 250px;
    background-color: white;
    height: 200px;
    width: 370px;
    
}

.kran12, .manipu12, .buld12 h2 {
    
    
    
}

.kran {
    background-image: url(imag/kra.jpg);
    width: 370px;
    height: 253px;
}

.manipu {
    background-image: url(imag/manip.jpg);
    background-color: #fff;
    width: 370px;
    height: 248px;
   ...