JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideBox">
    <div class="myButton">ПОДРОБНЕЕ</div>   
</div>

CSS

div.slideBox {
  background-color: #FFF;
  width: 200px;
  height: 300px;
  position: relative;
  float: left;
  margin: 0px 0px 40px;
  overflow: hidden;    
 border:6px solid #CCC;
  box-shadow: 0px 0px 10px #000;
  -webkit-box-shadow: 0px 0px 10px #000;
  -moz-box-shadow: 0px 0px 10px #000;
  z-index:2;}

div.slideBox img {
  border: 0;
  position: absolute;
  width: 220px;
  height: 300px;
  left:0px;
  top:0px;
  z-index:1
}
.slideBox {text-align:justify; color:#fff;padding:0 10px;}
.slideBox p{font-size:14px}
.readmore,.myButton{position:absolute; top:278px; z-index:1001;  bottom: -15px;  }

.myButton {
 -moz-border-radius: 6px; /* Firefox */
  -webkit-border-radius: 6px; /* Safari, Google Chrome */
  -o-border-radius: 6px; /* Opera */
  -ms-border-radius: 6px; /* IE8 */
  -icab-border-radius: 6px; /* Icab */
  border-radius: 6px; /* CSS3 */
  color:#ffffff;
  text-align:center; 
  font-family:arial;
  font-size:14px;
  font-weight:bold;
  padding:4px 10px;     
  text-decoration:none; 
  display:block;
}
.myButton {
  -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
  -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
  box-shadow:inset 0px 1px 0px 0px #f5978e;
  background-color:#246aaa;
  border:1px solid #d02718;
  text-shadow:1px 1px 0px #810e05;
}
.myButton {margin-left:41px;width:96px;}
.myButton:hover {background-color:#c62d1f;}
.myButton:active{position:relative;top:1px;}