JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="info-snaki">
        <div class="info-sg">
            <h2>ВАМ ПОНРАВИТСЯ С НАМИ РАБОТАТЬ!</h2>
        </div>
        
        <div class="info-info">
            
                <div class="container2 clearfix">
                    
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/1in.png" /></div>
                        <div>Используем только <br>натуральный мрамор</div>
                    </div>
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/2in.png" /></div>
                        <div>Экологически <br>чистый <br>продукт</div>
                    </div>
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/3in.png" /></div>
                        <div>Мы любим наших <br>клиентов</div>
                    </div>
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/4in.png" /></div>
                        <div>Контроль качества</div>
                    </div>
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/5in.png" /></div>
                        <div>Сроки поставки <br>1-2 дня</div>
                    </div>
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/6in.png" /></div>
                        <div>Наличие сертификатов</div>
                    </div>
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/7in.png" /></div>
                        <div>Цена вне<br>конкуренции</div>
                    </div>
                    <div class="info">
                        <div><img  width="127" height="127"  src="img/8in.png" /></div>
                        <div>Консультация<br>технолога</div>
                    </div>
                ...

CSS

.info-snaki{
    background:#333 ;
    margin:0;
    width:100%
}
 
.info-sg{
    
    font-family: "Lucida Console";
    font-size:2em;
    line-height: 1;
    text-align: center;
    margin:0;
    width:100%;
    padding-top: 30px;
}
 
.info-info{
    
    margin:0;
    width:100%;
}
.container2  {
 
    position: static;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  
  font-family: "Lucida Console";
    font-size:1.2em;
  
  
}
 
.info {
 display: block;
  width: 32%;
  max-width: 100%;
  height: auto;
  text-align: center;
  margin:auto;
  float:left;
  margin-bottom:60px;
  
  
}
.info div { /* для IE8+ */
  display: inline-block;
  vertical-align: middle;
}
.info div div img {
  width: 100%;
  height: auto;
}
.clearfix{
  clear:both;
}
.clearfix:after, .clearfix:before{
  content:"";
  clear:both;
  display:table;
}