JSFiddle - React, Tailwind, and code Playground

HTML

<div class='grid'>
  <span class='vert'>view more</span>
  <h1>
    Wines from all over the world
  </h1>
  <div class='btn_wrap'>
    <button>
      All wines
    </button>
  </div>
  <div class='bg_color'>
  </div>
  <div class='bottle'>
  </div>
</div>

SCSS

body {
  margin: 0;
  font-family: 'Verdana', sans-serif;
}

.grid {
  display: grid;
  grid: 80px 250px 200px / 10% 25% 25% 30% 10%;
  width: 100%;
  min-width: 640px;
  height: 530px;
}

.bg_color {
  background: url(https://images.unsplash.com/photo-1581985430116-d8fba25256b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80);
  background-size: cover;
  grid-row: 2 / span 2;
  grid-column: 3 / span 3;
  z-index: -1;
}

.bottle {
  background: url("https://lh3.googleusercontent.com/proxy/ZQq_b63K08ehNIIVsjABCb-3vottm_TDFEJsnwWRJsuEU1-iOqB9_Bhn4uFXRRsEDiugqCO-CPyov81iY6I-E0nb4sUDezZ_Q4Y-ix3rTgHvWJmk5e29KkEPypaAJ61bq_Db9C44S3JgqenJ1UYDWmZcDskX73njRw");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(-17deg);
  z-index: 5;
  grid-column: 4;
  grid-row: 1 / span 3;
}

h1 {
  grid-column: 2 / span 2;
  grid-row: 1 / span 3;
  font-size: 3.8rem;
  z-index: 10;
}

.btn_wrap {
  grid-column: 2;
  grid-row: 3;
  padding-top: 2rem;

  button {
    background: #eb85b9;
    color: white;
    padding: 0.5rem 1.3rem;
    font-size: 1.1rem;
  }
}

.vert {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 0.8rem;
  position: relative;

  &:before {
    position: absolute;
    content: '';
    height: 60%;
    background: black;
    top: 0;
    width: 1px;
  }
}