JSFiddle - React, Tailwind, and code Playground

HTML

<p id="hoge"></p>

JavaScript

const sample_json = {
    "apple": {
    	"color": "red"
    },
    "banana": {
    	"color": "yellow"
    }
}

const hoge = document.getElementById('hoge');
const red = sample_json.apple.color;
const yellow = sample_json.banana.color;

hoge.insertAdjacentHTML('beforebegin',red);