JSFiddle - React, Tailwind, and code Playground

HTML

<div class="s-container letter-container">
  <div></div>
  <div></div>
</div>

SCSS

.letter-container {
    min-width: 60px;
    padding: 5px;
    border: 1px solid black;
    float: left;
  }
  .s-container {
    div:nth-child(1) {
      width: 70px;
      height: 35px;
      border-radius: 90px 90px 0 0;
      background: red;
      -webkit-animation: rotate-top 4s linear;
    }
    div:nth-child(2) {
      width: 70px;
      height: 35px;
      border-radius: 0px 0px 90px 90px;
      border-top: 1px solid yellow;
      margin: 0px 10px;
      background: red;
    }
  }
  
  @-webkit-keyframes rotate-top { 
  to { -webkit-transform: rotate(325deg); } 
  
  }