<div class="storeItem">
   <h3>
    <a>Drip Belt</a>
  </h3>
  <img src="https://shop.r10s.jp/palm-nut/cabinet/04917692/06046630/imgrc0074381308.jpg" alt="">
   <p>Description</p>

  <div class="buttonList">
    <button>Add to cart</button>
    <button>Star</button>
    <button>Another one</button>
    <button>btn</button>
  </div>  
</div>
.storeItem {
  margin-top: 50px;
  background: white;
  border: 1px solid #EDEDED;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.09);
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 600px;
}

img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

h3 {
  text-align: center;
  color: white;
  padding: 0 1rem;
  transform: skew(-5deg) rotate(-1deg);
  margin-top: -3rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

p {
  line-height: 2;
  font-weight: 300;
  flex-grow: 1;
  padding: 0 3rem;
  font-size: 1.5rem;
  text-align: center;
  font-weight: 300;
  color: rgb(57, 57, 57);
} 

a {
  background: #FF0000;
  display: inline;
  line-height: 1.3;
  font-size: 4rem;
  text-align: center;
  color: white;
  padding: 0 1rem;
}


.buttonList{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1px;
  background: #E1E1E1;
  border-top: 1px solid #E1E1E1;
}

button {
  background: white;
  border: 0;
  font-size: 1rem;
  padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.