Hacer una leyenda en HTML

 <ul class="legend">
    <li><span class="greendot"></span>High amounts of available beds</li><br></br>
    <li><span class="yellowdot"></span>Medium amounts of available beds</li><br></br>
    <li><span class="reddot"></span>Low amounts of available</li><br></br>
    <li><span class="blackdot"></span>Data of available beds N/A</li><br></br>
  </ul>
https://hospitable.live to see how it works
Sid Potti