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(){
     
      var el = document.getElementsByClassName("myP");
      
      for(let i = 0; i<el.length; i++){
      el[i].innerHTML = colorItems[i];
      }
      
    } 
    </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>