JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

<link href="https://fonts.googleapis.com/css?family=Courgette|Lato:100,300,400" rel="stylesheet">

  <div class = "new-avis">
    <div class = "new-avis-head">
      <span class = "new-avis-head-one">Russie autrement</span><span class = "new-avis-head-two">Histores</span>
    </div>
    <img src = "https://russieautrement.com/upload/medialibrary/bef/db9fd9929e93ea0fe0f99ba4cdc4284d-min.jpg">
  <div class = "new-avis-text">
    Nous sommes de retour à Toulouse et gardons de belles images dans la tête. Macha a été particulièrement intéressante, motivée et d'une grande gentillesse et disponibilité pour nous accompagner. Les chauffeurs (nous en avons eu 3 différents !) tous agréables et conduisant prudemment...&nbsp;<a href = "#">Lire la suite</a>
  </div>
  <div class = "new-avis-names">
  <span>Odile et Jean-Marc</span> 
  <!--<div class = "toutlesavis-mini">Tous les avis&nbsp;<img src = "https://russieautrement.com/upload/medialibrary/987/arrow-point-to-right.png"></div>-->
    </div>
    <div class = "vsyakaya-fignya">
      <div class = "vfblock">Avis</div>
      <div class = "vfblock">Лицокнига</div>
      <div class = "vfblock">Гуууугл</div>
      <div class = "vfblock" id = "touslesavis">Tous les avis&nbsp;<img src = "https://russieautrement.com/upload/medialibrary/987/arrow-point-to-right.png"></div>
    </div>
    <!--<div class = "touslesavis-mini-two"><span>Tous les avis</span>&nbsp;<img src = "https://russieautrement.com/upload/medialibrary/987/arrow-point-to-right.png"></div>-->
    
  </div>

CSS

img {
  max-width: 100%;
}
.new-avis{
  border: 1px solid #bfbfbf;
  font-family: lato;
  position: relative;
  padding: 5px;
}
.new-avis-head{
  position: absolute;
  top:0;
  margin-top: 20px;
}
.new-avis-head-one, .new-avis-head-two{
  padding: 10px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 3px;
  font-size: 20px;
}

.new-avis-head-one{
  background: #c73728;
}

.new-avis-head-two{
  background: #0085ff;
}

.new-avis-text{
  padding: 10px;
  font-weight: 300;
}

.new-avis-text> a{
  font-weight: normal;
  color: #003260;
}

.new-avis-names{
  font-weight: bold;
  /*display: block;*/
  width: 200px;
  border-top: 1px solid #bfbfbf;
  margin-left: 10px;
  padding-top: 10px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
}

.vsyakaya-fignya{
  display:flex;
  flex-direction: row;
  margin-top: 20px;
}

.vfblock{
  width: 25%;
  background: #e5e5e5;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#touslesavis{
  background: #0085ff;
  text-transform: uppercase;
  color: #fff;
}

.vfblock > img{
  width: 12px;
}
.toutlesavis-mini{
  display: none;
}

@media (min-width: 320px) and (max-width: 420px){
  .new-avis-head-one, .new-avis-head-two{
  padding: 5px;
  letter-spacing: 1px;
  font-size: 14px;
}
  
  .new-avis-head{
    margin-top: 15px;
  }
  
  .vsyakaya-fignya{
    display: none;
  }
  .new-avis-names{
    width: 93%;
    justify-content: space-between;
    align-items:center;

  }
  .toutlesavis-mini{
    
    height: 15px;
    display: flex;
    padding: 5px;
    background: #0085ff;
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;

    
  }
  .toutlesavis-mini > img{
    width: 10px;
  }
  
  .touslesavis-mini-two{
    height: 15px;
    display: flex;
    padding: 5px;
    background: #0085ff;
  text-transform: uppercase;
  color: #fff;
  display:flex;
  justify-content: center;
  padding: 10px;

  margin: 15px 10px 0 10px;
  }
  .touslesavis-mini-two> img{
    width:...