JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pr">

<div class="kotak-kotak">
  <div class="prDics">40%</div>
  
  <a href="http://www.rakuten.co.id/shop/omg/product/Majestic?s-id=id_pc_home-living_product_elite-spring-bed-majestic">
    
    <i><img src="http://tshop.r10s.com/cd6/951/e4df/b39f/c0c6/b03a/4735/113be48a5e005056ae5a00.jpg?_ex=230x230" alt="Home Living Rakuten Belanja Online - elite-spring-bed-majestic"/>
    </i>
  
  </a>
 </div> <!-- end div kotak-kotak -->

  <div class="toko">Hello World</div>


<!-- ini yg ke hidden dulu -->
<div class="hidden">
  <div class="rincian"><b>Rincian Produk</b></div>


</div> <!-- end div hidden -->

</div> <!-- end div pr -->

CSS

.kotak-kotak{
	border:1px solid #bfbfbf;
	position:absolute;
	width:275px;
}

.pr:hover{box-shadow: 0px 2px 0px #bf0000;}

/* yg ini error mulu */
.hidden{
	display:none;
	border:1px solid green;
	position:relative;
	margin-top:50px;
  z-index:9999;
}
.pr:hover .hidden{display:block;}



.rincian{
--border:1px solid red; width:130px; height:30px; text-align:center; margin:0 auto; display:block; padding:3px;
}



.toko{
	--border:1px solid yellow;
	position:absolute;
	margin-top:218px;
	text-align:center;
	width:275px;
	height:35px;
	overflow:hidden;
	font-weight:bold;
	font-size:13px;
	line-height:140%;
}



/* abaikan */
.pr{width:275px;float:left;font-family:Arial;--height:319px;height:255px;margin-right:10px; --border:1px solid #ececec;--border-radius:3px;margin-bottom:20px;transition: all 0.2s linear;}

.prDics{background:#bf0000;color: ghostwhite;font-size: 16px;font-weight: bold;margin-left:5px;margin-top:5px;padding-left:10px;padding-top: 15px;position: absolute;width: 36px;height: 30px;border-radius:100px;z-index:10}

.pr a i img{border:none;max-height:215px;max-width:215px;border-top-right-radius:3px;border-top-left-radius:3px;-moz-border-top-right-radius:3px;-moz-border-top-left-radius:3px; margin-left:40px;}

 .pr img:hover{transition: opacity 0.3s linear;opacity:0.1;}
 
 .pr .hPromo{display:inline;text-align:right;width:130px;float:right;color:#000;font-size:13px;padding-right:5px;height:35px;position:relative;}.pr .hPromo span{font-weight:bold;font-size:21px;color:#bf0000;letter-spacing:-1.5px;}