Check out example codes for "html legend". It will help you in understanding the concepts better.

Code Example 1

The HTML <legend> element represents a title caption for the content of 
its parent <fieldset>.

Code Example 2

<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> to see how it works

Code Example 3

<form action="/action_page.php">
    <label for="fname">First 
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    type="text" id="lname" name="lname"><br><br>
    <input type="email" 
    id="email" name="email"><br><br>
    <input type="date" 
    id="birthday" name="birthday"><br><br>
    type="submit" value="Submit">

Code Example 4

#legend in html
<ul class="legend">
    <li><span class="greendot"></span>Text</li><br></br>
    <li><span class="yellowdot"></span>Text</li><br></br>
    <li><span class="reddot"></span>Text</li><br></br>
    <li><span class="blackdot"></span>Text</li><br></br>
  .legend { list-style: none; margin-left:10px;}
    .legend li { float: left; margin-right: 15px;}
    .legend span { border: 1px solid #ccc; float: left; width: 10px; height: 12px; margin: 2px;}
    .legend {
             position: fixed;
             top: 62%;
             left: 10%; 
  /* bring your own prefixes */
             transform: translate(-50%, -50%);
    /* your colors */
    .legend .greendot { background-color: #00ff00;}
    .legend .yellowdot { background-color: #ffff33; }
    .legend .reddot { background-color: #ff3333; }
    .legend .blackdot{ background-color: #000000; }

Learn ReactJs, React Native from