JSFiddle - React, Tailwind, and code Playground

HTML

<span class="strip blue"></span><span>Male</span>
<br />
<span class="strip pink"></span><span>Female</span>

CSS

.strip {
  display: inline-block;
  height: 5px;
  width: 80px;
  margin-right: 5px;
}

.strip.pink {
  background: repeating-linear-gradient(90deg, transparent, transparent 10px, #ffaacd 5px, #ffaacd 30px);
}

.strip.blue {
  background: #AACCFF;
}