JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <section class="cart">
    <div class="nav__box">
      <div class="nav__number">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150">
          <text x="0" y="140">04</text>
        </svg>
      </div>
      <div class="nav__prev"><i class="fas fa-angle-left"></i></div>
      <div class="nav__title">My Basket</div>
    </div>


  </section>
</body>

SCSS

@import url('https://fonts.googleapis.com/css?family=Cabin:400,700');
$bglightgray: #F6F6F6;
$bglightblue: #e9f2fa;
$bgwhite: #ffffff;
$fontdark: #2a363b;
$fontgray: #919cb7;
$fontlightgray: #b3bacb;
$fontlightred: #ff638d;
body {
  padding: 10px;
  background-color: $bglightgray;
  font-family: 'Cabin', sans-serif;
}

.cart {
  width: 700px;
  height: 1500px;
  background-image: linear-gradient(to bottom, transparent 710px, #fff 710px), linear-gradient(to right, rgb(68, 108, 225) 0%, rgb(57, 161, 221) 100%);
  border-radius: 50px;
  overflow: hidden;
}

.nav {
  position: relative;
  &__number {
    position: absolute;
    width: 250px;
    top: 45px;
    right: 80px;
    font-size: 190px;
    font-weight: 700;
    fill: transparent;
    stroke: #fff;
    stroke-opacity: .3;
    stroke-width: 2;
    transform: rotate(90deg);
  }
  &__prev {
    padding: 75px 60px;
    font-size: 30px;
    color: $fontgray;
  }
  &__title {
    margin-left: 60px;
    margin-bottom: 60px;
    font-size: 45px;
    font-weight: 700;
    color: $bgwhite;
  }
}