JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

<div class = "banner-culinaire">
  <div class = "bannername-culinaire">
    Russie<br>
    Voyages gastronomiques
  </div>  
  <div class = "bannertext-culinaire">
  Passionés de gastronomie et de voyages? Laissez-vous surprendre par des séjours culinaires en Russie!</div>
  <div class = "bannerpic-culinaire">
    <img src = "http://www.svoimirykami.club/wp-content/uploads/2016/04/%D0%BA%D0%B0%D0%BA-%D1%81%D0%B2%D0%B0%D1%80%D0%B8%D1%82%D1%8C-%D0%B1%D0%BE%D1%80%D1%89.jpg">
  </div>
  
</div>


<h2 style = "text-align:center;">Voyages gastronomiques EN RUSSIE: une exprérience unique</h2>
<div class = "description">
<div class = "description-name">
Découvrir
</div>
<div class = "description-text">
 La nouvelle cuisine russe a été reconnue par le prestigieux guide gastronomique «Gault&Millau» en novembre 2017. Elle représente le mélange des recettes traditionnelles et nouvelles tendances culinaires et incontournable pour les amateurs de la gastronomie et de la haute cuisine.
</div>
</div>

<div class = "description">
<div class = "description-name">
Savourer
</div>
<div class = "description-text">
  Vivre une expérience unique en dégustant des produits locaux méconnus du public étranger et des boissons alcoolisées nationales dont la variété laisse surprendre. Du nord au sud, la cuisine de chaque région possède ses propres caractéristiques et spécialités traditionnelles russes.
</div>
</div>

<div class = "description">
<div class = "description-name">
Rencontrer et participer
</div>
<div class = "description-text">
  Cours de cuisine russe, plats typiques, marchés authentiques, repas chez l’habitant, dégustation de caviar et de vodka, visites culturelles, vous attendent lors d’un séjour culinaire.
</div>
</div>

<div class ="pourquoi">
<p>Pourquoi voyager avec Russie Autrement?</p>
<div class = "line">
<div class = "pourquoi-element">
<div class = "pourquoi-element-star"><img src =...

CSS

.banner-culinaire {
  width: 100%;
  height: 220px;
  border: 1px solid #eee9e5;
  position:relative;
}

.bannername-culinaire {
    margin-top:10%;
    position: absolute;
    color: white;
    font: bold 24px/45px Arial, Sans-Serif;
    letter-spacing: -1px;
    background: rgb(0, 0, 0); /* на случай, если следующая строка не сработает */
    background: rgba(199, 55, 40, 0.7);
    padding	: 10px 20px 10px 10px;
    z-index:2;
    text-transform:uppercase;
}


.bannerpic-culinaire{
  width: 100%;
  height: 220px;
  overflow:hidden;
}
.bannertext-culinaire{
    position: absolute;
    font-weight: bold;
    z-index:2;
    bottom:5px;
    text-shadow: 1px 1px 10px black;
    text-align:center;
    color: white;
}

.description{
  position: relative;
  width:100%;
  margin:10px 0;
  display:flex;
  flex-direction:row;
}

.description-name{
  display:inline;
  margin-right:10px;
  width:15%;
  text-align:center;
  font-weight:bold;
  
}

.description-text{
  width:85%;
  text-align:justify;
}

.pourquoi{
 
 background: rgba(199, 55, 40, 0.1);
 display:flex;
 flex-direction:column;
 padding-bottom:20px;
  
}
.pourquoi p{
  text-align:center;
}
.line{
  margin:10px;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
}
.pourquoi-element{
  display:flex;
  flex-direction:row;
  width:40%;
  
 
}



.pourquoi-element-desc{
   display:flex;
  flex-direction:column;
  width:78%;

}

.pourquoi-element-name{
  padding: 10px 20px 10px 10px;
  font-size: 18px;
  font-weight:bold;
  text-align:left;
  
  
}
.pourquoi-element-text{
  padding: 0px 0px 0px 10px;
  text-align:left;
  
}
.pourquoi-element-star{
  width:22%;
  
}
.pourquoi-element-star img{
  height:50px;
}

.purquoi-button{

margin: 0 auto;
background-color:red;
padding:10px;
}
.purquoi-button a{
  text-decoration:none;
  color:#fff;
}

#nous{
  width:70%;
}
#description-button{
  width:30%;
}
#description-button p{
background-color:red;
text-align:center;
padding:10px;
}

#description-button...