From d4969d531f8bd52268ae7b9d7c21e1591f00bbe7 Mon Sep 17 00:00:00 2001
From: nitin <nitin4real@gmail.com>
Date: Wed, 15 Jan 2025 00:12:05 +0530
Subject: [PATCH] poc: left-nav-bar tailwind integration

---
 src/common/common.css                         |  20 +--
 src/common/left-menu.js                       | 141 +++++++++++++-----
 .../advanced/adjustVideoProfile/index.html    |   2 +
 src/example/advanced/audioEffects/index.html  |   2 +
 .../advanced/customVideoSource/index.html     |   2 +
 .../advanced/displayCallStats/index.html      |   2 +
 src/example/advanced/geoFencing/index.html    |   2 +
 .../advanced/joinMultipleChannel/index.html   |   2 +
 src/example/advanced/screenshot/index.html    |   2 +
 src/example/advanced/selfCapturing/index.html |   2 +
 src/example/advanced/selfRendering/index.html |   2 +-
 src/example/advanced/selfRendering/index.js   |   2 +-
 .../advanced/shareTheScreen/index.html        |   2 +
 .../advanced/testMediaDevices/index.html      |   2 +
 src/example/advanced/vadExtention/index.html  |   2 +
 src/example/basic/basicLive/index.html        |   2 +
 src/example/basic/basicVideoCall/index.html   |   2 +
 src/example/basic/basicVoiceCall/index.html   |   2 +
 src/example/extension/aiDenoiser/index.html   |   2 +
 src/example/extension/beauty/index.html       |   2 +
 src/example/extension/spatialAudio/index.html |   2 +
 src/example/extension/superClarify/index.html |   2 +
 src/example/extension/vad/index.html          |   2 +
 .../extension/videoCompositor/index.html      |   2 +
 .../extension/virtualBackground/index.html    |   2 +
 src/example/framework/react/index.html        |   2 +
 src/example/framework/vue/index.html          |   2 +
 src/example/others/dualStream/index.html      |   2 +
 src/example/others/pushStreamToCDN/index.html |   2 +
 src/index.html                                |   2 +
 30 files changed, 170 insertions(+), 47 deletions(-)

diff --git a/src/common/common.css b/src/common/common.css
index 08c72aa2..a7fe049c 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -27,22 +27,17 @@ input[type="range"]::-webkit-slider-runnable-track {
 
 .left {
   position: relative;
-  flex: 0 0 240px;
-  max-width: 240px;
-  min-width: 240px;
   height: 100vh;
   box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: scroll;
 }
 
 .right {
-  position: relative;
   flex: 1 1 880px;
-  max-width: 880px;
+  /* max-width: 880px; */
   background-color: #f2f7f8;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding: 1rem;
   height: 100vh;
   overflow-y: auto;
 }
@@ -118,7 +113,7 @@ input[type="range"]::-webkit-slider-runnable-track {
   margin-bottom: 0.25rem !important;
   padding: 0.25rem 0.5rem;
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
+  /* color: rgba(0, 0, 0, 0.85); */
 }
 
 .triangle {
@@ -160,7 +155,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 }
 
 .sidebar-top a {
-  display: inline-block;
+  /* display: inline-block; */
 }
 
 .sidebar-item {
@@ -470,3 +465,8 @@ button#join, button#leave {
     margin-top: 0.5rem !important;
   }
 }
+
+
+.finder {
+  border: 5px solid red;
+}
diff --git a/src/common/left-menu.js b/src/common/left-menu.js
index 76f3b104..b9c6e02b 100644
--- a/src/common/left-menu.js
+++ b/src/common/left-menu.js
@@ -7,27 +7,28 @@ function __isSmallScreen() {
   const windowWidth = $(window).width();
   return windowWidth <= SM_WIDTH;
 }
-
 function __transListToMenuDom(list) {
   return list
     .map((item) => {
-      return `<div class="sidebar-menu" >
- <div class="sidebar-title">
-   <span class="i18n" name="${item.name}"></span>
-   <span class="triangle"></span>
- </div>
- <div class="sidebar-list">
-   ${item.data
-     .map((item, index) => {
-       return `
-     <div class="sidebar-item" data-index="${index}">
-       <a href="${item.url}" class="i18n" name="${item.name}"> </a>
-     </div>
-     `;
-     })
-     .join("")}
- </div>
-</div>`;
+      return `
+        <div class="sidebar-menu">
+          <div class="sidebar-title">
+            <span class="i18n" name="${item.name}"></span>
+            <span class="triangle"></span>
+          </div>
+          <div class="sidebar-list">
+            ${item.data
+              .map((item, index) => {
+                return `
+                  <div class="sidebar-item" data-index="${index}">
+                    <a href="${item.url}" class="i18n" name="${item.name}"></a>
+                  </div>
+                `;
+              })
+              .join("")}
+          </div>
+        </div>
+      `;
     })
     .join("");
 }
@@ -44,21 +45,22 @@ function __initMenu() {
     logoImgSrc = `${ORIGIN_URL}/assets/agora-logo-zh.png`;
   }
   let logoHtml = `<img src=${logoImgSrc} alt="logo" style="width:56px; height: 30px;">`;
-  let menuHtml = `
-  <div class="sidebar">
-  <div class="sidebar-top">
-    <div class="border-bottom pb-3 mb-3 flex top-wrapper">
-      <a href=${href} target="_blank" class="link-body-emphasis text-decoration-none">
-        ${logoHtml}
-      </a>
-      <span id="language-switch-wrapper">
-      </span>
-    </div>
-  </div> 
-  ${__transListToMenuDom(MENU_LIST)}
-  </div >
-    `;
 
+  let menuHtml = `
+    <div class="sidebar">
+    <div class="sidebar-top">
+      <div class="border-bottom pb-3 mb-3 flex top-wrapper">
+        <a href=${href} target="_blank" class="link-body-emphasis text-decoration-none">
+          ${logoHtml}
+        </a>
+        <span id="language-switch-wrapper">
+        </span>
+      </div>
+    </div> 
+    ${__transListToMenuDom(MENU_LIST)}
+    </div >
+      `;
+  menuHtml = `${leftNav()}`;
   if (__isSmallScreen()) {
     menuHtml = `<nav class="navbar width-100 overflow-hidden">
       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-navbar">
@@ -90,10 +92,9 @@ function __hightlightMenu() {
   $(".sidebar-item").removeClass("active").removeClass("hover");
   $(".sidebar-title").removeClass("active").removeClass("hover");
   $(".triangle").removeClass("open");
-
-  let targetNode = $(`.sidebar-item:has(a[href = "${href}"])`);
+  let targetNode = $(`a[href = "${href}"]`).find('.sidebar-item')
   if (!targetNode.length) {
-    targetNode = $(`.sidebar-item:has(a[href = "${href}index.html"])`);
+    targetNode = $(`a[href = "${href}index.html"]`).find('.sidebar-item')
   }
   targetNode.addClass("active");
   const sidebarMenu = targetNode.closest(".sidebar-menu");
@@ -160,3 +161,73 @@ if (__isSmallScreen()) {
     __hightlightMenu();
   });
 }
+
+function leftNav() {
+  let language = getLanguage();
+  let href = "";
+  let logoImgSrc = "";
+  if (language == "en") {
+    href = DEFAULT_EN_DOC_URL;
+    logoImgSrc = `${ORIGIN_URL}/assets/agora-logo-en.png`;
+  } else {
+    href = DEFAULT_ZH_DOC_URL;
+    logoImgSrc = `${ORIGIN_URL}/assets/agora-logo-zh.png`;
+  }
+  let logoHtml = `<img src=${logoImgSrc} alt="logo" style="width:56px; height: 30px;">`;
+  return `
+    <div class="relative flex w-full max-w-[20rem] flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-xl shadow-blue-gray-900/5">
+      <div class="sidebar-top">
+        <div class="border-bottom p-3 flex top-wrapper">
+          <a href=${href} target="_blank" class="link-body-emphasis text-decoration-none">
+            ${logoHtml}
+          </a>
+          <span id="language-switch-wrapper"></span>
+        </div>
+      </div>
+      <nav class="min-h-screen flex min-w-[240px] flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700">
+        ${__transListToMenuDomV2(MENU_LIST)}
+      </nav>
+    </div>
+  `;
+}
+
+
+function __transListToMenuDomV2(list) {
+  return list
+    .map((item) => {
+      return `
+        <div class="sidebar-menu relative block w-full">
+          <div name="${item.name}" role="button"
+            class="sidebar-title i18n flex items-center w-full p-0 leading-tight transition-all rounded-lg outline-none bg-blue-gray-50/50 text-start text-blue-gray-700 hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
+            <button type="button"
+              class="finder flex items-center justify-between w-full p-3 font-sans text-xl antialiased font-semibold leading-snug text-left transition-colors border-b-0 select-none border-b-blue-gray-100 text-blue-gray-900 hover:text-blue-gray-900">
+              <p class="block mr-auto font-sans text-base antialiased font-normal leading-relaxed text-blue-gray-900"></p>
+              <span class="ml-4"></span>
+            </button>
+          </div>
+          <div class="overflow-hidden">
+            <div class="block w-full py-1 font-sans text-sm antialiased font-light leading-normal text-gray-700">
+              <nav class="flex min-w-[240px] flex-col gap-1 p-0 font-sans text-base font-normal text-blue-gray-700">
+                ${item.data
+                  .map((item, index) => {
+                    return `
+                  <a href="${item.url}" class="navitem flex items-center">
+                    <div name="${item.name}" role="button"
+                      class="sidebar-item i18n flex items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                      stroke="currentColor" aria-hidden="true" class="w-5 h-3">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
+                    </svg>
+                  </a>
+                `;
+                  })
+                  .join("")}
+              </nav>
+            </div>
+          </div>
+        </div>
+      `;
+    })
+    .join("");
+}
\ No newline at end of file
diff --git a/src/example/advanced/adjustVideoProfile/index.html b/src/example/advanced/adjustVideoProfile/index.html
index 651abc61..8398077c 100644
--- a/src/example/advanced/adjustVideoProfile/index.html
+++ b/src/example/advanced/adjustVideoProfile/index.html
@@ -9,6 +9,8 @@
   <title>Adjust Video Profile -- Agora</title>
   <link rel="stylesheet" href="../../../assets/bootstrap.min.css">
   <link rel="stylesheet" href="../../../common/common.css">
+  <script src="https://cdn.tailwindcss.com"></script>
+
 </head>
 
 <body>
diff --git a/src/example/advanced/audioEffects/index.html b/src/example/advanced/audioEffects/index.html
index c2780ca1..518903c3 100644
--- a/src/example/advanced/audioEffects/index.html
+++ b/src/example/advanced/audioEffects/index.html
@@ -8,6 +8,8 @@
     <title>Audio Mixing & Audio Effect -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/customVideoSource/index.html b/src/example/advanced/customVideoSource/index.html
index f0325253..a7e84d49 100644
--- a/src/example/advanced/customVideoSource/index.html
+++ b/src/example/advanced/customVideoSource/index.html
@@ -8,6 +8,8 @@
     <title>Custom Video Source -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/displayCallStats/index.html b/src/example/advanced/displayCallStats/index.html
index 87c801e9..71ce87b7 100644
--- a/src/example/advanced/displayCallStats/index.html
+++ b/src/example/advanced/displayCallStats/index.html
@@ -8,6 +8,8 @@
     <title>Display Call Stats -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/geoFencing/index.html b/src/example/advanced/geoFencing/index.html
index 8dd05ad8..8a7bc54a 100644
--- a/src/example/advanced/geoFencing/index.html
+++ b/src/example/advanced/geoFencing/index.html
@@ -8,6 +8,8 @@
     <title>Geo Fencing -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/joinMultipleChannel/index.html b/src/example/advanced/joinMultipleChannel/index.html
index 13282537..a30543c4 100644
--- a/src/example/advanced/joinMultipleChannel/index.html
+++ b/src/example/advanced/joinMultipleChannel/index.html
@@ -8,6 +8,8 @@
     <title>Join Multiple Channel -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/screenshot/index.html b/src/example/advanced/screenshot/index.html
index 936defef..89333700 100644
--- a/src/example/advanced/screenshot/index.html
+++ b/src/example/advanced/screenshot/index.html
@@ -8,6 +8,8 @@
     <title>Video Screenshot -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/selfCapturing/index.html b/src/example/advanced/selfCapturing/index.html
index c708fc77..91308089 100644
--- a/src/example/advanced/selfCapturing/index.html
+++ b/src/example/advanced/selfCapturing/index.html
@@ -8,6 +8,8 @@
     <title>Video Self-Capturing -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/selfRendering/index.html b/src/example/advanced/selfRendering/index.html
index 2f373d31..50be4a2c 100644
--- a/src/example/advanced/selfRendering/index.html
+++ b/src/example/advanced/selfRendering/index.html
@@ -8,6 +8,7 @@
     <title>Video Self-Rendering -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
 
   <body>
@@ -52,7 +53,6 @@
                       position: absolute;
                       left: 0px;
                       top: 0px;
-                      object-fit: cover;
                     "
                   ></video>
                 </div>
diff --git a/src/example/advanced/selfRendering/index.js b/src/example/advanced/selfRendering/index.js
index 29fadc5b..8603a314 100644
--- a/src/example/advanced/selfRendering/index.js
+++ b/src/example/advanced/selfRendering/index.js
@@ -121,7 +121,7 @@ async function subscribe(user, mediaType) {
             <div style="width: 100%; height: 100%; position: relative; overflow: hidden; background-color: black;">
                 <video id="video_track-video-${uid}-mirror" 
                     class="agora_video_player" playsinline="" muted="" 
-                    style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: cover;  transform: rotateY(180deg);">
+                    style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;  transform: rotateY(180deg);">
                 </video>
             </div>
         </div>
diff --git a/src/example/advanced/shareTheScreen/index.html b/src/example/advanced/shareTheScreen/index.html
index aa9ef43e..3d465f8e 100644
--- a/src/example/advanced/shareTheScreen/index.html
+++ b/src/example/advanced/shareTheScreen/index.html
@@ -8,6 +8,8 @@
     <title>Agora WebSDK Demos</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/testMediaDevices/index.html b/src/example/advanced/testMediaDevices/index.html
index 20440ba0..6ac351d8 100644
--- a/src/example/advanced/testMediaDevices/index.html
+++ b/src/example/advanced/testMediaDevices/index.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="./jquery.jsonview.min.css" />
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/advanced/vadExtention/index.html b/src/example/advanced/vadExtention/index.html
index 910b716f..e5fec9db 100644
--- a/src/example/advanced/vadExtention/index.html
+++ b/src/example/advanced/vadExtention/index.html
@@ -7,6 +7,8 @@
     <title>VAD -- Agora</title>
     <link rel="stylesheet" href="../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="./index.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/basic/basicLive/index.html b/src/example/basic/basicLive/index.html
index 1a41fea0..a7688b8a 100644
--- a/src/example/basic/basicLive/index.html
+++ b/src/example/basic/basicLive/index.html
@@ -8,6 +8,8 @@
     <title>Basic Live -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/basic/basicVideoCall/index.html b/src/example/basic/basicVideoCall/index.html
index 74fced08..b59a1583 100644
--- a/src/example/basic/basicVideoCall/index.html
+++ b/src/example/basic/basicVideoCall/index.html
@@ -8,6 +8,8 @@
     <title>Basic Video Call -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/basic/basicVoiceCall/index.html b/src/example/basic/basicVoiceCall/index.html
index 7531f4bd..9e44a042 100644
--- a/src/example/basic/basicVoiceCall/index.html
+++ b/src/example/basic/basicVoiceCall/index.html
@@ -8,6 +8,8 @@
     <title>Basic Voice Call -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/extension/aiDenoiser/index.html b/src/example/extension/aiDenoiser/index.html
index 5377fd5b..d24caf58 100644
--- a/src/example/extension/aiDenoiser/index.html
+++ b/src/example/extension/aiDenoiser/index.html
@@ -8,6 +8,8 @@
     <title>Ai Denoiser -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/extension/beauty/index.html b/src/example/extension/beauty/index.html
index 48ccc29c..7b559b5b 100644
--- a/src/example/extension/beauty/index.html
+++ b/src/example/extension/beauty/index.html
@@ -8,6 +8,8 @@
     <title>Beauty -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/extension/spatialAudio/index.html b/src/example/extension/spatialAudio/index.html
index 3860d73a..2087b86d 100644
--- a/src/example/extension/spatialAudio/index.html
+++ b/src/example/extension/spatialAudio/index.html
@@ -8,6 +8,8 @@
     <title>Spatial Audio Demo -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/extension/superClarify/index.html b/src/example/extension/superClarify/index.html
index 2d304cc9..c6f8433e 100644
--- a/src/example/extension/superClarify/index.html
+++ b/src/example/extension/superClarify/index.html
@@ -8,6 +8,8 @@
     <title>Super Clarify -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/extension/vad/index.html b/src/example/extension/vad/index.html
index 9480ead9..3550b6e4 100644
--- a/src/example/extension/vad/index.html
+++ b/src/example/extension/vad/index.html
@@ -8,6 +8,8 @@
     <title>VAD -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/extension/videoCompositor/index.html b/src/example/extension/videoCompositor/index.html
index 0d097e16..9e215f80 100644
--- a/src/example/extension/videoCompositor/index.html
+++ b/src/example/extension/videoCompositor/index.html
@@ -8,6 +8,8 @@
     <title>Video Compositor -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/extension/virtualBackground/index.html b/src/example/extension/virtualBackground/index.html
index 2ae9b2dd..24e363ea 100644
--- a/src/example/extension/virtualBackground/index.html
+++ b/src/example/extension/virtualBackground/index.html
@@ -9,6 +9,8 @@
   <title>Virtual background -- Agora</title>
   <link rel="stylesheet" href="../../../assets/bootstrap.min.css">
   <link rel="stylesheet" href="../../../common/common.css">
+  <script src="https://cdn.tailwindcss.com"></script>
+
 </head>
 
 <body>
diff --git a/src/example/framework/react/index.html b/src/example/framework/react/index.html
index 09f0a0f0..2fec9651 100644
--- a/src/example/framework/react/index.html
+++ b/src/example/framework/react/index.html
@@ -8,6 +8,8 @@
     <title>Use React -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/framework/vue/index.html b/src/example/framework/vue/index.html
index 7afb182a..89532b6e 100644
--- a/src/example/framework/vue/index.html
+++ b/src/example/framework/vue/index.html
@@ -8,6 +8,8 @@
     <title>Use Vue -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/others/dualStream/index.html b/src/example/others/dualStream/index.html
index 23bcd567..80c050d6 100644
--- a/src/example/others/dualStream/index.html
+++ b/src/example/others/dualStream/index.html
@@ -8,6 +8,8 @@
     <title>Dual Stream -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/example/others/pushStreamToCDN/index.html b/src/example/others/pushStreamToCDN/index.html
index 6cb93897..a463836e 100644
--- a/src/example/others/pushStreamToCDN/index.html
+++ b/src/example/others/pushStreamToCDN/index.html
@@ -8,6 +8,8 @@
     <title>Push Stream To CDN -- Agora</title>
     <link rel="stylesheet" href="../../../assets/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>
diff --git a/src/index.html b/src/index.html
index a2452ff2..652b7dfc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,6 +8,8 @@
     <title>Agora WebSDK Demos</title>
     <link rel="stylesheet" href="./assets/bootstrap.min.css" />
     <link rel="stylesheet" href="./common/common.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
   </head>
 
   <body>