JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" type="text/css" href="/style.css">
   <script src="/script.js"></script>
</head>

<body>
   <section class="conteiner">
      <div id="text">

      </div>

</body>

</html>

JavaScript

let json = { "reel": { "id": "605bd8327384f20012ef930c", "title": "group shuffle", "cover_url": "https://d1siuea9m8pfk9.cloudfront.net/reels/5fbe2742811f7600121f789d/5fbe2742811f7600121f789d-1616631856442.png", "video_url": "https://d1siuea9m8pfk9.cloudfront.net/reels/5fbe2742811f7600121f789d/5fbe2742811f7600121f789d-1616631850251.mp4", "likes": 1, "comments": 1, "awards": [{ "_id": "60040b9ce1933c383426f0cb", "name": "Best Action", "count": 2 }, { "_id": "60040af8e1933c383426f0ca", "name": "Best Actor", "count": 1 }, { "_id": "60040bb3e1933c383426f0cc", "name": "Best Original", "count": 1 }], "user": { "avatar_url": "https://d1siuea9m8pfk9.cloudfront.net/avatars/5fbe2742811f7600121f789d/a_1614651937461.png", "_id": "5fbe2742811f7600121f789d", "username": "hypatia1", "name": "Hypatia" }, "script": { "_id": "5f958e05463f8f00126c631b", "genre": { "_id": "5f9153a7011c6100128446ed", "name": "historical" }, "title": "Shuffle Dance", "user": "5fcadd0855c85100129d2f4e" } } };

   let textBlock = document.getElementById('text');

   textBlock.innerHTML = json.reel.title;