JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle blue rounded squared-top">ssdfs</div>

CSS

.text-white {
  color: white;
}

.blue {
  @extend .text-white;
  background: royalblue;
}

.squared-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded {
  border-radius: 10px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}