JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="wrapper">

<div class="reference">
  <span class="start">50</span>
   <div class="pointer" title="80"></div>
  <span class="end">90</span>
</div>

</div>

<div class="wrapper">

<div class="reference2">
  <span class="start">10.0</span>
   <div class="pointer" title="10.3" style="left: 30%"></div>
  <span class="end">11.0</span>
</div>

</div>

CSS

body {
  padding: 100px;
}
.wrapper {
  display: flex;
}
.reference {
  width: 100px;
  height: 6px;
  background-color: #666;
  border-radius: 4px;
  position: relative;
  margin: 20px;
}
.reference2 {
  width: 60px;
  height: 6px;
  background-color: #666;
  border-radius: 4px;
  position: relative;
  margin: 20px;
}

.start {
  position: absolute;
  bottom: -16px;
  left: 0;
  font-size: 12px;
}
.end {
  position: absolute;
  bottom: -16px;
  right: 0;
  font-size: 12px;
}
.pointer {  
  position: absolute;
  top: -10px;
  left: 75%;
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;  
  border-top: 8px solid #f00;
  margin-left: -6px;
text-align: center;
}
.pointer > span {
  position: absolute;
  top: -25px;
left: -7px;
margin: auto;
}