JSFiddle - React, Tailwind, and code Playground

by mjaric

HTML

<div class="content">
  <div class="background"></div>
  Text Text
</div>
<div class="content">
  <div class="background"></div>
</div>

CSS

* {
  box-sizing: border-box;
}
.content {
  position: relative;
  width: 200px;
  text-align: center;
  height: 40px;
}
.background {
  position: absolute;
  top: 0;
  border-top: 10px solid red;
  border-radius: 100%;
  height: 200%;
  width: 100%;
}