JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item">
<div class="photo_block">
<img src="https://i.gyazo.com/48ba48e8a5181fbf0db18f94c8cfcbef.png" alt="">
</div>
1337 руб
<div class="inner_block">
inner text text
inner text text
inner text text
inner text text
inner text text
</div>
</div>
<div class="item">
<div class="photo_block">
<img src="https://i.gyazo.com/48ba48e8a5181fbf0db18f94c8cfcbef.png" alt="">
</div>
1337 руб
<div class="inner_block">
inner text text
inner text text
inner text text
inner text text
inner text text
</div>
</div>
<div class="item">
<div class="photo_block">
<img src="https://i.gyazo.com/48ba48e8a5181fbf0db18f94c8cfcbef.png" alt="">
</div>
1337 руб
<div class="inner_block">
inner text text
inner text text
inner text text
inner text text
inner text text
</div>
</div>
<div class="item">
<div class="photo_block">
<img src="https://i.gyazo.com/48ba48e8a5181fbf0db18f94c8cfcbef.png" alt="">
</div>
1337 руб
<div class="inner_block">
inner text text
inner text text
inner text text
inner text text
inner text text
</div>
</div>
CSS
*{
margin: 0px;
padding: 0px;
font-size:15px;
font-family: Open Sans;
color: #667;
font-weight: 600;
}
.photo_block{
padding: 10px;
width: 50px;
height: 70px;
margin: auto;
}
.item{
display: block;
float: left;
padding: 10px;
margin: 5px;
overflow: hidden;
height: 120px;
width: 150px;
background-color: #fff;
border: 1px solid transparent;
}
.item:hover{
height: 250px;
/* border: 1px solid hotpink; */
box-shadow: 0px 0px 3px black;
}