JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <svg height="70" width="70" class="col-md-6">
    <text x="0" y=30 transform="rotate(30 20,40)">Wish</text>
  </svg>
  <svg height="70" width="70">
    <text x="0" y=30 transform="rotate(-30 30,-25)">You</text>
  </svg>
  <svg height="70" width="70">
    <text x="30" y=30 transform="rotate(20 0,30)">A</text>
  </svg>
  <svg height="70" width="70">
    <text x="0" y=30 transform="rotate(30 20,40)">Very</text>
  </svg>
  <svg height="70" width="70">
    <text x="0" y=30 transform="rotate(-30 30,0)">Happy</text>
  </svg>
  <svg height="70" width="70">
    <text x="0" y=30 transform="rotate(30 20,40)">New</text>
  </svg>
  <svg height="70" width="70">
    <text x="0" y=30 transform="rotate(-30 30,-25)">Year</text>
  </svg>
</div>
<div class="year">
  <svg height="150" width="100">
    <text x="30" y="100">2</text>
  </svg>
  <svg height="150" width="100">
    <text x="30" y="100">0</text>
  </svg>
  <svg height="150" width="100">
    <text x="30" y="100">1</text>
  </svg>
  <svg height="150" width="100">
    <text x="30" y="100">7</text>
  </svg>
</div>

CSS

body {
  margin: 50px 0;
  padding: 0;
  text-align: center;
}

div svg {
  -webkit-box-shadow: -22px -15px 22px -3px rgba(107, 97, 107, 0.68);
  -moz-box-shadow: -22px -15px 22px -3px rgba(107, 97, 107, 0.68);
  box-shadow: -22px -15px 22px -3px rgba(107, 97, 107, 0.68);
}

.year svg {
  fill: green;
  stroke: #000000;
  font-size: 60px;
}

svg {
  margin: 5px;
  border: 1px solid grey;
}