JSFiddle - React, Tailwind, and code Playground

by Rishi Gautam

HTML

<div class='parent'>
  <div class='title'>Jaimeson, Jackson</div>
  <div class='overlap'></div>
</div>
<br/>
<div class='parent'>
  <div class='title'>Ocean, Frank</div>
  <div class='overlap'></div>
</div>

CSS

.parent {
  width: 200px; 
  height: 32px;
  color: #fff;
  border: 1px solid #1275b5;
  background-color: #67adda;
}

.overlap {
  position: relative;
  width: 26%;
  height: 100%;
  background-color: #808080;
}

.title {
  position: absolute;
  padding: 5px 0px 0px 5px;
  z-index: 1;
}