JSFiddle - React, Tailwind, and code Playground

by lilysirius

HTML

<div class="flex-container">
<div class="left" lang="mn-hdm">ᠮᠠᠯ ᠠᠵᠤ ᠠᠬᠤᠢ ᠭᠠᠵᠠᠷ ᠲᠠᠷᠢᠶᠠᠯᠠᠩ ᠤᠨ ᠦᠶᠢᠯᠡᠳᠪᠦᠷᠢᠯᠡᠯ</div>
<div class="right">
  <div class="index">мал аж ахуй газар тариалангийн үйлдвэрлэл <span class="lat"><a href="entry://mal aǰu aχui γaǰar tariyalang-un üyiledbürilel">mal aǰu aχui γaǰar tariyalang-un üyiledbürilel</a></span> <span class="audios"> <a href="sound://AI/м/мал аж ахуй газар тариалангийн үйлдвэрлэл.wav"><img src="/chimege.svg" alt="🔊" onerror="this.src='https://bolor-toli.com/icons/chimege.svg';" /></a></span> <span class="boxed" onclick=showHide("#uni-X30")>U<span class="uni" id="uni-X30">M A L SPACE A J U SPACE A Q U I SPACE G A J A R SPACE T A R I Y A L A NG NNBSP U N SPACE UE Y I L E D B UE R I L E L</span></span></div>
  <hr />
  <div span="subnav"><span class="btLang btTextTablinks" onclick="btShowText(event, 'bt-HZV')" id="defaultDict">한국어</span></div>
  <div class="btTextContent" id="bt-HZV">
    <dl>
      <dt>
        <mn-pos>N.S.</mn-pos>
      </dt>
      <dd>
        <kr-gloss>농목업</kr-gloss><span class="audios"><a href="sound://KR/농/농목업.wav"><img src="/chimege.svg" alt="🔊" onerror="this.src='https://bolor-toli.com/icons/chimege.svg';" /></a></span>, <kr-gloss>농목업</kr-gloss><span class="audios"><a href="sound://KR/농/농목업.wav"><img src="/chimege.svg" alt="🔊" onerror="this.src='https://bolor-toli.com/icons/chimege.svg';" /></a></span>
      </dd>
    </dl>
    <div class="index sub"><span class="tgbtn" onclick="showSub('bt-sub-YVZ')" id="bt-sub-YVZ-btn">+</span> далайн аж ахуйн үйлдвэрлэл ба мал аж ахуй <span class="audios"> <a href="sound://AI/д/далайн аж ахуйн үйлдвэрлэл ба мал аж ахуй.wav"><img src="/chimege.svg" alt="🔊" onerror="this.src='https://bolor-toli.com/icons/chimege.svg';" /></a></span></div>
    <div class="flex-container subgloss" id="bt-sub-YVZ">
      <div class="left" lang="mn-hdm">ᠳᠠᠯᠠᠢ ᠶ᠋ᠢᠨ ᠠᠵᠤ ᠠᠬᠤᠢ ᠶ᠋ᠢᠨ ᠦᠢᠯᠡᠳᠪᠦᠷᠢᠯᠡᠯ ᠪᠠ ᠮᠠᠯ ᠠᠵᠤ ᠠᠬᠤᠢ</div>
      <div class="right">
        <dl>
          <dt>
           ...

CSS

/* 加载字体 */
@font-face {font-family: 'Mongolian Baiti'; src: local('Mongolian Baiti'), url('/Mongolian_Baiti_Regular.ttf');}
@font-face {font-family: 'Charis SIL'; src: local('Charis SIL'), url("/CharisSIL-Regular.ttf");}
@font-face {font-family: 'Tahoma'; src: local('Tahoma'), url('/tahoma.ttf');}
@font-face {font-family: 'SimSun'; src: local('SimSun'), url('/simsun.ttc');}
@font-face {font-family: 'NanumMyeongjo'; src: local('NanumMyeongjo'), url('/NanumMyeongjo.ttf');}

÷
/* 设置不同设备的基础字号 */
//@media only screen and (max-device-width: 1440px) {body {font-size: 16px;} .left {width: 1em;} .right {margin-left: 1.6em;} .mn {position: relative; left: -0.4em;} .lat {position: relative; left: -0.5em;}} /* 手机 */
//@media only screen and (min-device-width: 1441px) {body {font-size: 14px;} .left {width: 1.5em;} .right {margin-left: 2.5em;}} /* 电脑 */

@media only screen and (max-device-width: 1440px) {body {font-size: 16px;} .mn {position: relative; left: -0.4em;} .lat {position: relative; left: -0.5em;}} /* 手机 */
@media only screen and (min-device-width: 1441px) {body {font-size: 14px;}} /* 电脑 */

/* Tab */
.tab {overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; margin: 0 0 3px 0;}   /* Style the tab */
.tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; 
                padding: 1px 6px; transition: 0.3s; font-size: 92%; font-family: 'Charis SIL';}                /* Style the buttons inside the tab */
.tab button:hover {background-color: #ddd;}                                                                 /* Change background color of buttons on hover */
.tab button.tabActive {background-color: #ccc;}                                                                  /* Create an active/current tablink class */
.btTabcontent {display: none; padding: 3px 4px; border: 1px solid #ccc; border-top: none;}        /* Style the tab content */
.tabLat {font-family: 'Charis SIL';}
.tabCyrl {font-family:...

JavaScript

function showHide(z) {
    [].forEach.call(document.querySelectorAll(z), function(x) {
        if (x.style.display === "none") {
            x.style.display = "inline";
        } else {
            x.style.display = "none";
        }
    });
}

function showSub(x) {
    let text = document.getElementById(x);
    let btn = document.getElementById(x+'-btn');
    
    if (text.style.display === "none") {
      text.style.display = "block";
      btn.innerHTML ='-';
    } else {
      text.style.display = "none";
      btn.innerHTML ='+';
    }
}

function btOpenBook(evt, bookName) {
  // Declare all variables
  var i, btTabcontent, tablinks;

  // Get all elements with class="btTabcontent" and hide them
  btTabcontent = document.getElementsByClassName("btTabcontent");
  for (i = 0; i < btTabcontent.length; i++) {
    btTabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "tabActive"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" tabActive", "");
  }

  // Show the current tab, and add an "tabActive" class to the button that opened the tab
  document.getElementById(bookName).style.display = "block";
  evt.currentTarget.className += " tabActive";
} 

function btShowText(evt, textName) {
  // Declare all variables
  var i, tabcontent, tablinks;
  var dicname = textName.split("-")[0];
  var idx = textName.split("-")[1];

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName(dicname + "TextContent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "langActive"
  tablinks = document.getElementsByClassName(dicname + "TextTablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" langActive",...