JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<div class="main-container">

  <div class="inner-container">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 128 128"><g><path fill="white" d="M123.181,67.013l-17.693-61a1.75,1.75,0,0,0-1.68-1.263H24.192a1.75,1.75,0,0,0-1.68,1.263l-17.693,61a1.742,1.742,0,0,0-.069.487v9A1.75,1.75,0,0,0,6.5,78.25H49.78V82.5a1.75,1.75,0,0,0,1.75,1.75h6.22v23.5H51.53a1.75,1.75,0,0,0-1.75,1.75v4.25H24.192a1.751,1.751,0,0,0-1.75,1.75v6a1.751,1.751,0,0,0,1.75,1.75h79.616a1.751,1.751,0,0,0,1.75-1.75v-6a1.751,1.751,0,0,0-1.75-1.75H78.22V109.5a1.75,1.75,0,0,0-1.75-1.75H70.25V84.25h6.22a1.75,1.75,0,0,0,1.75-1.75V78.25H121.5a1.75,1.75,0,0,0,1.75-1.75v-9A1.742,1.742,0,0,0,123.181,67.013ZM8.83,65.75l7.686-26.5H35.432l-4.178,26.5Zm30.145-26.5H62.25v26.5H34.8Zm26.775,0H89.025L93.2,65.75H65.75Zm31,26.5-4.178-26.5h18.916l7.686,26.5Zm13.723-30H92.017L87.682,8.25h14.811Zm-21.995,0H65.75V8.25H84.139ZM62.25,8.25v27.5H39.526l4.335-27.5Zm-36.743,0H40.318l-4.335,27.5H17.531ZM8.25,69.25H31v5.5H8.25Zm26.25,0H62.25v5.5H34.5Zm67.558,50.5H25.942v-2.5h76.116Zm-27.338-6H53.28v-2.5H74.72Zm-7.97-6h-5.5V84.25h5.5Zm7.97-27H53.28v-2.5H74.72Zm1.75-6H65.75v-5.5H93.5v5.5Zm20.53,0v-5.5h22.75v5.5Z"/><path fill="white" d="M99.019,17.81l1.683,5.8a1.75,1.75,0,1,0,3.361-.975l-1.683-5.8a1.75,1.75,0,1,0-3.361.975Z"/></g></svg>
    </div>
    <div>
      900
    </div>
    <div class="horizontal-line">
    </div>
    <div>
      icon
    </div>
    <div>
      900
    </div>
  </div>
  <div class="pointer">
  
  </div>
</div>

CSS

.main-container, .main-container * {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

.main-container{
  border: 1px solid;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-container{
  height: 250px;
  width: 250px;
  background-color: #0b385f;
  color:#fff;
  border-radius: 50%;
  display:flex;
  flex-direction: column;
  justify-content:space-around;
  align-items:center; 
}
.horizontal-line{
  height:3px;
  width:100%;
  background-color:#fff;
}
.pointer{
   width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 100px solid red;
      position: absolute;
      bottom:-99px;
}