JSFiddle - React, Tailwind, and code Playground

by Loxos

HTML

<div class="legend">

<div>
<span>Type of Transport</span>
<br>
<br>
<svg height="20px" width="100px">
    <path fill="none" stroke="black" d="M0,15 70,15"></path>
    <polygon fill="black" stroke="black" points="70,12 70,18 75,15"></polygon> 
    <text x="5" y="10" font-family="Helvetica,sans-Serif" font-size="11">Streaming</text>
  </svg>
  <br>
  <svg height="20px" width="100px">
    <path fill="none" stroke="black" stroke-dasharray="5,2" d="M0,15 70,15"></path>
    <polygon fill="black" stroke="black" points="70,12 70,18 75,15"></polygon> 
    <text x="5" y="10" font-family="Helvetica,sans-Serif" font-size="11">Batch</text>
  </svg>
  <br>
  <svg height="20px" width="100px">
    <path fill="none" stroke="black" stroke-dasharray="2,3" d="M0,15 70,15"></path>
    <polygon fill="black" stroke="black" points="70,12 70,18 75,15"></polygon> 
    <text x="5" y="10" font-family="Helvetica,sans-Serif" font-size="11">Snapshot</text>
  </svg>
</div>
<div>
  <span>Timeliness</span>
  <br>
  <br>
  <svg height="20px" width="80px">
    <path fill="none" stroke="#228B22" d="M0,15 70,15"></path>
    <polygon fill="#228B22" stroke="#228B22" points="70,12 70,18 75,15"></polygon> 
    <text x="5" y="10" font-family="Helvetica,sans-Serif" font-size="11">Realtime</text>
  </svg>
  <br>
  <svg height="20px" width="80px">
    <path fill="none" stroke="#FFC125" d="M0,15 70,15"></path>
    <polygon fill="#FFC125" stroke="#FFC125" points="70,12 70,18 75,15"></polygon> 
    <text x="5" y="10" font-family="Helvetica,sans-Serif" font-size="11">Delayed</text>
  </svg>
  <br>
  <svg height="20px" width="80px">
    <path fill="none" stroke="#1874CD" d="M0,15 70,15"></path>
    <polygon fill="#1874CD" stroke="#1874CD" points="70,12 70,18 75,15"></polygon> 
    <text x="5" y="10" font-family="Helvetica,sans-Serif" font-size="11">End of Day</text>
  </svg>
</div>
<div>
<svg width="120" height="37">
  <ellipse fill="gold" stroke="#8b1a1a" cx="60" cy="20" rx="60" ry="15"></ellipse>
  <text...

CSS

.legend {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: black dotted 1px;
    padding-left: 10px;
    padding-top: 10px;
}

.legend > div{
  float:left;
  height:100%;
  position:block
  top:0;
  padding-right:10px;
}

.legend > div > span {
  font-size:10pt;
  font-family:Helvetica,sans-Serif;
}