JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<ul class='dayWiseYearLegend'>
<li><span class='old'><span class='round'></span></span>gggggggg</li>
<li><span class='new'></span>ggggsgggg</li>
</ul>

CSS

.dayWiseYearLegend li{
  list-style:none;
  float:left;
  margin-left:15px;
}
.dayWiseYearLegend .old{
display:inline-block;
width:20px;
position:relative;
margin-right:5px;
border-bottom:2px solid #900c3f;
}
.dayWiseYearLegend .old .round{
display:inline-block;
  width:10px;
  height:10px;
  position:absolute;
  top:-4px;
  left:5px;
  border-radius:50%;
  background:#900c3f;
}
.dayWiseYearLegend .new{
display:inline-block;
background:#058dc7;
width:10px;
position:relative;
margin-right:5px;
top:3px;
height:10px;
}