JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

<div class = "contblocks">
<div class = "threeblocks">
<div class = "picthreeblocks onepict">
 
</div>
<div class = "textthreeblocks">Toutes nos excursions sont individuelles. Nous n'organisons pas de grands groupes pré-formés avec des gens qui ne se connaissent pas.</div>
</div>
<div class = "threeblocks">
<div class = "picthreeblocks twopict"></div>
<div class = "textthreeblocks">Notre guide vous donnera les informations nécessaires pour une meilleure compréhension de l'histoire russe ! Il vous conseillera aussi de bonnes adresses où manger.</div>
</div>

<div class = "threeblocks">
<div class = "picthreeblocks threepict"></div>
<div class = "textthreeblocks">Profitez de la découverte de Saint-Pétersbourg en compagnie d’un guide locale, représentant de sa culture.</div>
</div>
</div>

CSS

.contblocks {
  width: 660px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.threeblocks {
  display: flex;
  flex-direction: column;
  padding: 15px;
  width: 33%;
}



.picthreeblocks {
  margin-bottom: 10px;
  border-bottom: 1px solid;
  padding-bottom: 10px;
  text-align: center;
}

.textthreeblocks {
  text-align: justify;
}




.onepict {
    background: url("https://russieautrement.com/upload/medialibrary/35d/world (1).png") no-repeat 50% 50%;
    display: block;
    width: 190px;
    height: 64px;
   }

.onepict:hover {
    background: url("https://russieautrement.com/upload/medialibrary/4f8/world.png") no-repeat 50% 50%;
    }

.twopict {
    background: url("https://russieautrement.com/upload/medialibrary/753/brochure (1).png") no-repeat 50% 50%;
    display: block;
    width: 190px;
    height: 64px;
   }

.twopict:hover {
    background: url(https://russieautrement.com/upload/medialibrary/49c/brochure.png) no-repeat 50% 50%;
    }

.threepict {
    background: url("https://russieautrement.com/upload/medialibrary/d66/cathedral-of-saint-basil (1).png") no-repeat 50% 50%;
    display: block;
    width: 190px;
    height: 64px;
   }

.threepict:hover {
    background: url("https://russieautrement.com/upload/medialibrary/ccd/cathedral-of-saint-basil.png") no-repeat 50% 50%;
    }