JSFiddle - React, Tailwind, and code Playground

by wetali

HTML

<div class="sixs">
<div class="sixs_div">
<div class="foto">
  <img src="https://nmark.ru/cache/images/1fdefbba812089c191a1316b03c58ba1.png" alt="John">
</div>
  <p class="title">Превратим ваши пожелания в техзадание</p>
 </div>
<div class="sixs_div">
<div class="foto">
  <img src="https://nmark.ru/cache/images/85175db081b0348733225c3d647dd3b4.png" alt="John">
</div>
  <p class="title">Проанализируем выдачу в
google</p>
 </div>
 <div class="sixs_div">
<div class="foto">
  <img src="https://nmark.ru/cache/images/275bb314f735fe37dc116af636da6e16.png" alt="John">
</div>
  <p class="title">Выделим именно вашу
целевую аудиторию</p>
 </div>
 <div class="sixs_div">
<div class="foto">
  <img src="https://nmark.ru/cache/images/abb28aaa54a736bc869185f3af9b40df.png" alt="John">
</div>
  <p class="title">Проанализируем все
правильную структуру</p>
 </div>
 <div class="sixs_div">
<div class="foto">
  <img src="https://nmark.ru/cache/images/098cd5b33bbffd5c60f3fe0aafef67e3.png" alt="John">
</div>
  <p class="title">Установим систему
управления сайтом.</p>
 </div>
 <div class="sixs_div">
<div class="foto">
  <img src="https://nmark.ru/cache/images/76503c8ad6d2fecbb0565eabb69f1dbc.png" alt="John">
</div>
  <p class="title">Заполним сайт вашими
материалами</p>
 </div>
</div>

CSS

.sixs {
    display: flex;
    justify-content: space-between;
    
}
.sixs_div {
  width: 25%;
  height: 250px;
  margin: auto;
  text-align: center;
  font-family: arial;
  padding-top: 30px;
  
}
.foto{
  position: relative;
  z-index: 1;

}
.foto img{
  width: 70px;
  height: 70px;

  

}
.foto:after {
    position: absolute;
    content: '';
    width: 77px;
    height: 77px;
    background-color: #ffc41b;
    border-radius: 10em;
    left: 50px;
    top: 5px;
    z-index: -1;
}
.title {
  color: grey;
  font-size: 15px;
  padding: 5px 12px;
  line-height: 1.5;
}
@media (max-width: 950px) {
  .sixs {
    flex-wrap: wrap;
    
  }
.sixs_div {
  flex-grow: 2;
    width: 50%;
}

@media (max-width: 760px) {
  .sixs {
    flex-wrap: wrap;
    
  }
.sixs_div {
  flex-grow: 1;
    width: 40%;
}