JSFiddle - React, Tailwind, and code Playground

HTML

<div id="peacock">
  <b><i></i></b>
  <div class="drop1 drop"><b></b></div>
  <div class="drop2 drop"><b></b></div>  
  <div class="drop3 drop"><b></b></div>
  <div class="drop4 drop"><b></b></div>
  <div class="drop5 drop"><b></b></div>
  <div class="drop6 drop"><b></b></div>
  <div id="letters">
    <div class="A">N</div>
    <div class="B">B</div>
    <div class="C">C</div>
  </div>
</div>

CSS

#peacock {
  width: 732px;
  height: 420px;
  position: absolute;
  left: 50%;
  margin-left: -366px;
  top: 10px;
}
.drop {
  width: 157px;
  height: 157px;
  border-radius: 50%;
  position: absolute;
}
.drop b {
  position: absolute;
  bottom: 98px;
  left: 2px;
  content: '';
  width: 0;
  height: 0;
  border-left: 76px solid transparent;
    border-right: 77px solid transparent;  
}
.drop1 {
  background: #fcb711;  
  left: 0; bottom: 0;
  -webkit-transform: rotate(107.5deg);
}
.drop1 b {
  border-bottom: 243px solid #fcb711;
}
.drop2 {
  background: #f37020;  
  left: 61px; bottom: 164px;
  -webkit-transform: rotate(140.6deg);
}
.drop2 b {
  border-bottom: 260px solid #f37020;
}
.drop3 {
  background: #cd004d;  
  left: 202px; bottom: 262px;
  -webkit-transform: rotate(172.5deg);
}
.drop3 b {
  border-bottom: 270px solid #cd004d;
}
.drop4 {
  background: #6460aa;  
  right: 202px; bottom: 262px;
  -webkit-transform: rotate(-172.5deg);
}
.drop4 b {
  border-bottom: 270px solid #6460aa;
}
.drop5 {
  background: #0089d1;  
  right: 61px; bottom: 164px;
  -webkit-transform: rotate(-140.6deg);
}
.drop5 b {
  border-bottom: 260px solid #0089d1;
}
.drop6 {
  background: #0cb14b;  
  right: 0; bottom: 0;
  -webkit-transform: rotate(-107.5deg);
}
.drop6 b {
  border-bottom: 243px solid #0cb14b;
}
#peacock > b {
  position: absolute;
  z-index: 10;
  top: 85px;
  left: 370px;
  background: white;
  width: 39px;
  height: 43px;
  border-radius: 0px 10px 0 0;
}
#peacock > b i {
  position: absolute;
  content: '';
  background: #6460aa;
  width: 50px;
  height: 36px;
  left: 9px;
  top: 8px;
  border-radius: 50px 0 0 0/70px 0 0 0;
}
#letters {
  width: 602px;
  height: 264px;
  position: absolute;
  top: 448px;
  left: 66px;
  overflow: hidden;
}
#letters .N {
  position: absolute;
  top: 50px;
  background: #000;
  width: 51px;
  height: 204px;
}
#letters .N:before {
  content: '';
  position: absolute;
  top: 48px;
  background: inherit;
  width: 51px;
  height:...