JSFiddle - React, Tailwind, and code Playground
HTML
<div class="products">
<div class="product_box">
<div class="product_box_basic">
<a href="#"><img src="https://cloclo19.cloud.mail.ru/thumb/xw1/products/01.jpg" alt="" /></a>
<p>Coalesce: Functioning On Impatience T-Shirt</p>
<p class="product_price">$<strong>15</strong>.00</p>
<a href="#" class="addtocart">Add to Cart</a>
</div>
<div class="product_box_more">When you're dress-hunting, you want to find something that's fun, comfortable, flattering, and uniquely you! So, why not start with a sundress? They always brighten up the environment around you and inspire positivity wherever you go!
Looking for some color to brighten up your day? Check out the cotton sundresses.
</div>
</div>
<div class="product_box">
<div class="product_box_basic">
<a href="#"><img src="https://cloclo19.cloud.mail.ru/thumb/xw1/products/02.jpg" alt="" /></a>
<p>Ink Eater: Krylon Bombear Destroyed Tee</p>
<p class="product_price">$<strong>22</strong>.00</p>
<a href="#" class="addtocart">Add to Cart</a>
</div>
<div class="product_box_more">When you're dress-hunting, you want to find something that's fun, comfortable, flattering, and uniquely you! So, why not start with a sundress? They always brighten up the environment around you and inspire positivity wherever you go!
Looking for some color to brighten up your day? Check out the cotton sundresses.
</div>
</div>
<div class="product_box">
<div class="product_box_basic">
<a href="#"><img src="https://cloclo19.cloud.mail.ru/thumb/xw1/products/03.jpg" alt="" /></a>
<p>The Only Children: Paisley T-Shirt</p>
<p class="product_price">$<strong>55</strong>.00</p>
<a href="#" class="addtocart">Add to Cart</a>
</div>
<div class="product_box_more">When you're dress-hunting, you want to find something...
CSS
body {
color: #000000;
background-color: #ffffff;
font-size: 11px;
font-family: Arial;
}
a {
text-decoration: none;
}
.products {
width: 475px;
margin: 0 auto;
}
.product_box {
display: relative;
width: 149px;
margin: 3px;
}
.product_box:hover {
box-shadow: 0px 11px 40px -15px #000000;
}
.product_box_basic {
z-index: 1;
padding: 7px;
}
.product_box_more {
padding: 7px;
display: none;
}
.product_box:hover .product_box_more {
position: relative;
display: inline-block;
z-index: 5;
}
.product_box p {
font-size: 13px;
margin: 10px 0 10px 0;
}
.product_price {
float: left;
display: block;
}
.product_price strong {
font-size: 18px;
}
.addtocart {
float: right;
display: block;
background-color: #3a3a3a;
color: #ffffff;
margin: 10px 0 10px 0;
padding: 6px;
}
.addtocart:hover {
background-color: #eb5c3e;
}