<div class="main-info__email">
  <div class="main-info__input-wrap">
    <input class="main-info__input" type="text" placeholder="Enter your email to get started">
    <svg class="main-info__decor" width="70" height="78" viewBox="0 0 70 78" overflow="visible">
      <path d="m0,0h61.98c6.9,0,10.57,8.16,5.98,13.32L12.82,75.32c-1.52,1.71-3.69,2.68-5.98,2.68H0" fill="none" vector-effect="non-scaling-stroke" />
    </svg>
  </div>
  <button class="main-info__button">
    <svg class="main-info__button-bg" width="185" height="78" viewBox="0 0 185 78" overflow="visible">
      <path class="main-info__button-shape" d="m177,78H8.02c-6.9,0-10.57-8.16-5.98-13.32L57.18,2.68C58.7.98,60.88,0,63.16,0h113.84c4.42,0,8,3.58,8,8v62c0,4.42-3.58,8-8,8Z" vector-effect="non-scaling-stroke" />
    </svg>
    <span class="main-info__button-icon">🚀</span>
  </button>
</div>

* {
  box-sizing: border-box;
}

body {
  background-color: #181510;
  margin: 16px;
  font-family: sans-serif;
}

.main-info__email {
  --color: #ffa503;
  --transition-dur: 300ms;
  display: flex;
  max-width: 756px;
  margin: 0 auto;
  margin-top: 50px;
}

.main-info__email:focus-within {
  --color: #ff0a86;
}

.main-info__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  z-index: 0;
}

.main-info__input-wrap::before {
  content: '';
  position: absolute;
  inset: -2px 70px -2px -2px;
  border: 4px solid var(--color);
  border-right: none;
  border-radius: 8px 0 0 8px;
  z-index: -1;
  transition: border-color var(--transition-dur);
}

.main-info__decor {
  stroke: var(--color);
  stroke-width: 4px;
  flex-shrink: 0;
  transition: stroke var(--transition-dur);
}

.main-info__input {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 24px 0 24px 24px;
  border: none;
  background: none;
  font-size: 1.5rem;
  font-family: inherit;
  text-overflow: ellipsis;
  color: #fdfdfd;
  outline: none;
}

.main-info__input::placeholder {
  color: #fdfdfd77;
}

.main-info__button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  border: none;
  padding: 0;
  background: none;
  margin-left: -32px;
  outline: none;
  pointer-events: none;
}

.main-info__button:hover {
  cursor: pointer;
}

.main-info__button-bg {
  display: block;
  color: var(--color);
  fill: var(--color);
  stroke: var(--color);
  stroke-width: 4px;
  transition: var(--transition-dur);
  transition-property: currentcolor, fill, stroke;
  filter: drop-shadow(0 0 128px currentcolor);
}

.main-info__button:focus-visible .main-info__button-bg {
  stroke: #fff;
}

.main-info__button-shape {
  pointer-events: all;
}

.main-info__button-icon {
  position: absolute;
  margin-left: 2rem;
  font-size: 3rem;
}