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 = "cont">
  <img src = "https://pbs.twimg.com/profile_images/638255180811759616/1NIKMttL_400x400.jpg">
  <div class = "right-side">
    <div class = "text-sejour">
    <p class = "head-sejour">Séjour Complet à Saint-Pétersbourg</p>
    <div class = "duree-sejour"><span>7 jours 6 nuits</span><span class = "mielleure"><i>Mielleure offre</i></span> 
    </div>
    <p class = "desc-sejour">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-sejour">
      <div class = "foot-prix" data-title="Prix par personne en groupe de 4 participants">Dés &nbsp;&nbsp;<span class = "prix-sejour">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:5px;
}
.right-side{
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  padding:5px 5px 5px 0;
}
.text-sejour{
  padding-left:10px;
  /*width: 370px;*/
}
.head-sejour{
  font-size:21px;
  margin-top:-2px;
  font-weight:normal;
}

.mielleure{
  padding: 2px 12px;
  margin-left: 20px;
  background: #5128c7;
  color:#fff;
  font-family: 'Courgette', cursive;
}
.duree-sejour{
  border-bottom: 1px dashed gray;
  width:250px;
  padding-bottom:10px;
  margin-top:-15px;
  font-weight:300;
}
.foot-sejour{
  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-sejour{
  font-size: 26px;
}
.foot-voir, .foot-prix{
  width:200px;
  height:50px;
  /*paddi0ng:10px 20px;*/
  justify-content:center;
  color:#fff;
  display: flex; 
  align-items: center;
  font-weight:normal;
}
.foot-voir{
  background:#c73728;
  text-transform: uppercase;
  font-size:14px;
  
}


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



.foot-prix:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 0%; top: 0%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: #0085ff; /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
   /* padding: 5px 10px; /* Поля */
    /* Параметры рамки */
    color:#fff;
    width: 200px;
    height:50px;
    text-align:center;
    display:flex;
    align-items: center;
   }