JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

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

<div class = "cont">
  <img src = "https://pbs.twimg.com/profile_images/638255180811759616/1NIKMttL_400x400.jpg">
  <div class = "right-side">
    <div class = "text">
    <p class = "head">Séjour Complet à Saint-Pétersbourg</p>
    <div class = "duree"><span>7 jours 6 nuits</span><span class = "mielleure"><i>Mielleure offre</i></span> 
    </div>
    <p class = "desc">Un programme complet pour une découverte approfondie de Saint-Pétersbourg, la cité des tsars. De palais en cathédrales et en musées, vous partirez à la découverte …</p>
      </div>
    <div class = "foot">
      <div class = "foot-prix">Dés &nbsp;&nbsp;<span class = "prix">496 €</span> <div class = "mark">?</div></div>&nbsp;
      <div class = "foot-voir">Voir le programme</div>
    </div>
</div>

CSS

.cont{
  width:660px;
  border:1px solid #bfbfbf;
  display: flex;
  font-family: 'Lato', sans-serif;
  font-weight: lighter;
}

img {
  padding:3px;
}
.right-side{
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  padding:3px;
}
.text{
  padding-left:10px;
  width: 370px;
}
.head{
  font-size:21px;
  margin-top:-2px;
}

.mielleure{
  padding: 2px 12px;
  margin-left: 20px;
  background: #5128c7;
  color:#fff;
  font-family: 'Courgette', cursive;
}
.duree{
  border-bottom: 1px dashed gray;
  width:250px;
  padding-bottom:10px;
  margin-top:-15px;
}
.foot{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  flex: 0 0 auto;
}

.foot-prix{
  background:#0085ff;
  position:relative;
}
.mark{
  position:absolute;
  top:3px;
  right:5px;
  padding:1px 6px;
  border:1px solid;
  border-radius:50%;
  font-size:12px;
}
.prix{
  font-size: 26px;
}
.foot-voir, .foot-prix{
  width:200px;
  height:50px;
  /*paddi0ng:10px 20px;*/
  justify-content:center;
  color:#fff;
  display: flex; 
  align-items: center;
}
.foot-voir{
  background:#c73728;
  text-transform: uppercase;
  font-size:14px;
  
}


.desc{
 font-weight: 100;
 margin-top:7px;
  font-size: 15px;
}