JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red">
  <div class="letters">
    <span class="N n1"></span>
    <span class="I"></span>
    <span class="S s1"><span></span></span>
    <span class="S s2"><span></span></span>
    <span class="A"></span>
    <span class="N n2"></span>
  </div>
</div>

CSS

body {
 }
div.red {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: #eb2d2f;
  position: relative;
  top: 36px;
  left: 97px;
}
div.letters {
  width: 525px;
  height: 142px;
  background: #264d92;
  position: absolute;
  top: 110px;
  left: -83px;
  border-radius: 16px;
  box-shadow: 0px 0px 0px 12px #FFF;
}

.letters > span {
  top: 31px;
}
.n1 { left: 29px; }
.n2 { left: 413px; }
.N {
  position: absolute;
  background: white;
  width: 85px;
  height: 81px;  
}
.N:before {
  content: '';
  display: block;
  position: absolute;
  left: 23px;
  top: 18px;
  width: 0;
  height: 0;
    border-bottom: 63px solid #264d92; 
    border-right: 27px solid transparent;
}
.N:after {
  content: '';
  display: block;
  position: absolute;
  right: 23px;
  top: 0px;
  width: 0;
  height: 0;
  border-top: 60px solid #264d92; 
    border-left: 27px solid transparent;
}
.I {
  position: absolute;
  background: white;
  width: 23px;
  height: 81px;
  left: 128px;
}
.s1 { left: 164px; }
.s2 { left: 245px; }
.S {
  position: absolute;
  display: block;
  width: 53px;
  height: 50px;
  background: white;
  border-radius: 18px 0 0 22px;
  opacity: 1;
}
.S:before {
  content: '';
  width: 30px;
  height: 14px;
  display: block;
  position: absolute;
  right: 0;
  top: 18px;
  background: #264d92;
}
.S:after {
  content: '';
  width: 40px;
  height: 18px;
  display: block;
  position: absolute;
  right: -15px;
  top: 0;
  background: white;
}
.S > span {
  position: relative;
  top: 32px;
  left: 15px;
  display: block;
  width: 60px;
  height: 48px;
  background: white;
  border-radius: 0 21px 22px 0;
}
.S > span:before {
  content: '';
  width: 37px;
  height: 13px;
  display: block;
  position: absolute;
  left: 0;
  bottom: 18px;
  background: #264d92;
}
.S > span:after {
  content: '';
  width: 40px;
  height: 18px;
  display: block;
  position: absolute;
  left: -15px;
  bottom: 0;
  background: white;
}
.A {
  position: absolute;
  left: 319px;
 ...