JSFiddle - React, Tailwind, and code Playground

by evgeniel

HTML

<div class="products">
      <div class="product_box">
        <div class="product_box_basic">
          <a href="#"><img src="https://cloclo2.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 class="rating">
            <div class="rating_i">
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
            </div>
          </div>
        </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://cloclo2.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 class="rating">
            <div class="rating_i">
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
              <a href="" class="rating_icon"></a>
            </div>
          </div>
        </div>
        <div class="product_box_more">When you're dress-hunting, you want to find something that's fun, comfortable, flattering, and uniquely...

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: inline-block;
	width: 149px;
	margin: 3px;
  	position: relative;
  	vertical-align: top;
}

.product_box:hover {
	box-shadow: 0px 31px 40px -15px #000000;
}
.product_box_basic {
	z-index: 1;
	padding: 7px;
}

.product_box_more {
	padding: 7px;
	display: none;
  	position: absolute;
  	top: 100%;
  	background: #ffffff;
  	width: 149px;
  	left: 0;
  	box-sizing: border-box;
  	box-shadow: 0px 10px 40px -15px #000000;
}

.product_box:hover .product_box_more {
	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;
}

.rating {
  	overflow: hidden;
  	width: 135px;
  	text-align: center;
}

.rating:before,
.rating:after {
  	content: '';
  	display: inline-block;
  	vertical-align: middle;
  	box-sizing: border-box;
  	width: 100%;
  	height: 1px;
  	background: #f0f0f0;
  	
}

.rating:before {
  	margin-left: -100%;
}
.rating:after {
  	margin-right: -100%;
}

.rating_i {
	display: inline-block;
	width: 90px;
}

a.rating_icon {
	width: 12px;
	height: 12px;
	background: url(https://cloclo9.datacloudmail.ru/view/products/rating.png) no-repeat;
	display: inline-block;
	margin: 1px;
}

a.rating_icon:hover {
	background-position: 0 -12px;
}

@media screen and (max-width: 980px) {
   .products {
      width: 475px;
      margin: 0 auto;
   }
}

@media screen and (max-width: 504px) {
   .products {
      width: 314px;
      margin: 0 auto;
   }
}

@media screen and (max-width: 150px) {
   .products {
      width: 150px;
      margin: 0 auto;
   }
}