JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 440" height="0" width="0" style="position: absolute; opacity: 0; z-ndex: -9999">
  <defs>
    <linearGradient id="gradient-outline" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" stop-color="#873B4D">
        <animate
          attributeName="stop-color"
          values="#873B4D; #460E80; #873B4D"
          dur="3s" repeatCount="indefinite"/>
      </stop>
      <stop offset="1" stop-color="#460E80">
        <animate
          attributeName="stop-color"
          values="#460E80; #873B4D; #460E80"
          dur="3s" repeatCount="indefinite"/>
      </stop>
    </linearGradient>

    <linearGradient id="gradient-image-overlay" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" stop-color="#873B4D" stop-opacity="0.4"/>
      <stop offset="1" stop-color="#460E80" stop-opacity="0.8"/>
    </linearGradient>

    <clipPath id="clip-letter">
      <path d="M63.11,91.49C100.9,43,158.17,20,206,20S311.11,43,348.9,91.49c26,33.68,43.1,78.58,43.1,128.22,0,50.22-17.12,94.53-43.1,128.21C304.61,405.23,242.61,420,206,420s-98.61-14.77-142.89-72.08c-26-33.68-43.11-78-43.11-128.21C20,170.07,37.12,125.17,63.11,91.49Zm51.78,233C132.79,382.7,173.46,408,206,408s73.21-25.3,91.11-83.56c9.22-30,11.39-64.72,11.39-104.73S306.33,144.39,297.11,115C279.21,57.3,238.54,32,206,32s-73.21,25.3-91.11,83c-9.22,29.42-11.39,64.72-11.39,104.74S105.67,294.44,114.89,324.44Z"/>
    </clipPath>

    <symbol id="outline-letter">
      <path fill="none" stroke="url(#gradient-outline)" stroke-width="5"
       ...

CSS

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  overflow: auto;
  background:
    linear-gradient(rgba(19, 23, 26, 0.85), rgba(19, 23, 26, 1)),
    url('https://source.unsplash.com/rW-I87aPY5Y/700x600') no-repeat center / cover;
}

.item {
  display: block;
  width: 70%;
  margin: 50px auto 0;
}