JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
      <script type="text/javascript">
    
    var colorsjs = {
    "colors": [
        {
          "color": "black",
          "category": "hue",
          "type": "primary",
          "code": {
            "rgba": [255,255,255,1],
            "hex": "#000"
          }
        },
        {
          "color": "white",
          "category": "value",
          "code": {
            "rgba": [0,0,0,1],
            "hex": "#FFF"
          }
        },
    ]
};

      colorItems=['beige', 'red', 'blue'];

colorsjs.colors.map((o,i)=>{
colorItems.push(o.color);
});

     function loadData(){
      for (i=0; i<colorItems.length; i++){
          document.getElementById('myP'+(i+1)).innerHTML = colorItems[i]+'<br>'; 
      }
    } 
    </script>


    <title></title>
  </head>
  <body  onload="loadData()" >
    <p class="myP" id="myP1"></p>
    <p class="myP" id="myP2"></p>
    <p class="myP" id="myP3"></p>
    <p class="myP" id="myP4"></p>
    <p class="myP" id="myP5"></p>
  </body>

</html>