JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="cont_principal">
<div class="cont_central">
  <div class="cont_modal cont_modal_active">
  <div class="cont_photo">
  
<div class="cont_img_back">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/57/98/9f/57989f2a2e186e38bf93429aa395120c.jpg" alt="" />
    </div>


<div class="cont_detalles">
    <h3>Shakshuka With Feta</h3>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis est est aliquam, sed faucibus massa lobortis. Maecenas non est justo.</p>
    </div>
    </div>
    </div>
   </div>
</div>

CSS

/*
-------------- Basic Reset Css ----------
 */
* {
  margin: 0px auto;
  padding: 0px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;

}

/* -------- ----------- */
.cont_principal {
  position: absolute;
  width: 100%;
  height: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbfaf6+9,d4cebf+74,d4cebf+74,d4cebf+100 */
background: rgb(251,250,246); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(251,250,246,1) 9%, rgba(212,206,191,1) 74%, rgba(212,206,191,1) 74%, rgba(212,206,191,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(251,250,246,1) 9%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(251,250,246,1) 9%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 
}


.cont_central {  
position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -200px;
}

.cont_modal {
  position: relative;
  width: 300px;
  height: 400px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; 
transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}

.cont_photo {
  position: relative;
  width: 300px;
  height: 440px;
  overflow: hidden;
  background-color: #eee;
  border-radius:5px;
top: -20px;
float: left;
z-index: 2;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
transition: all 0.5s; 
box-shadow: 1px 1px 20px -5px rgba(0,0,0,0.5);  
}

.cont_img_back {
  position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
border-radius:5px ;
}
.cont_img_back > img {
  width: 100%;
opacity: 0.7;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
transition: all 1s;
}

.cont_img_back:hover > img {
  transform: scale(1.5);
}

.cont_text_ingredients {
position:...