JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo" class="otw cir red">
  <div class="otw-2 cir wht">
    <div class="itw cir red">
      <div class="itw-2 cir wht"></div>
    </div>
  </div>
  
  <div class="arrow arrow-otw"></div>
  <div class="arrow arrow-itw"></div>
  <div class="box-otw red"></div>
  <div class="box-itw wht"></div>
</div>

CSS

.cir{ border-radius: 100%; }
.red{ background-color: #C8162D; }
.wht{ background-color: #fff; }

.otw{ width: 150px; height: 150px; position: relative;}
.otw div{ position: absolute; }

.otw-2, .itw{ width: 80%; height: 80%; top:10%; left:10%; }
.itw-2 { width: 70%; height: 70%; top:15%; left:15%; }

.arrow{ position: absolute; width:0; height:0; border-style:dashed dashed solid dashed;  }
.arrow-otw { border-color: transparent transparent #FFFFFF; border-style: solid; border-width: 27px 45px; left: 78px; top: 12px; }
.arrow-itw{ border-color: transparent transparent #C8162D; border-style: solid; border-width: 23px 32px;  left: 98px; top: 27px;}

.box-otw{ height: 20px; width: 31px; left: 108px; top: 67px; }
.box-itw{ height: 16px; left: 122px; top: 71px; width: 11.5px; }