JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div class="a">A1 <input type="checkbox" class="cb" id="checkA1"></div>
    <div class="a">A2 <input type="checkbox" class="cb" id="checkA2"></div>
    <div class="a">B1 <input type="checkbox" class="cb" id="checkB1"></div>
    <div class="a">B2 <input type="checkbox" class="cb" id="checkB2"></div>
    <div class="a">C1 <input type="checkbox" class="cb" id="checkC1"></div>
    <div class="a">C2 <input type="checkbox" class="cb" id="checkC2"></div>

    <section id="ex1">
      <div id="counter"></div>
      <div id="word1" class=""></div>
      <div id="word2"></div>
      <div id="word3"></div>
      <div id="word4"></div>
      <div class="bt" id="btx">X</div>
      <div class="bt" id="bts">?</div>
      <div class="bt" id="btv">V</div>
    </section>

CSS

body{
  background-color: #20262E;
  color: white;
}

JavaScript

<?php include '../modules/head.php';?>
<link rel="stylesheet" href="style.css" type="text/css" />

<title>#</title>
<meta name="description" content="#">

<body>
  <?php include '../modules/header.php';?>
  <main>
    <div class="a">A1 <input type="checkbox" class="cb" id="checkA1"></div>
    <div class="a">A2 <input type="checkbox" class="cb" id="checkA2"></div>
    <div class="a">B1 <input type="checkbox" class="cb" id="checkB1"></div>
    <div class="a">B2 <input type="checkbox" class="cb" id="checkB2"></div>
    <div class="a">C1 <input type="checkbox" class="cb" id="checkC1"></div>
    <div class="a">C2 <input type="checkbox" class="cb" id="checkC2"></div>

    <div class="nav">
      <a href="#">Lista</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
    </div>
    <section id="ex1">
      <div id="counter"></div>
      <div id="word1" class=""></div>
      <div id="word2"></div>
      <div id="word3"></div>
      <div id="word4"></div>
      <div class="bt" id="btx">X</div>
      <div class="bt" id="bts">?</div>
      <div class="bt" id="btv">V</div>
    </section>

  </main>
  <?php include '../modules/footer.php';?>

  <style>

  </style>

  <script>
    let words;
    let A1 = [{
      q: 'A1: być',
      w: 'be',
      e: 'was, were',
      r: 'been'
    }, {
      q: 'A1: zaczynać, zacząć, rozpocząć',
      w: 'begin',
      e: 'began',
      r: 'begun'
    }, {
      q: 'A1: tłuc, (po)łamać, złamać',
      w: 'break',
      e: 'broke',
      r: 'broken'
    }, {
      q: 'A1: kupować',
      w: 'buy',
      e: 'bought',
      r: 'bought'
    }, {
      q: 'A1: móc, potrafić',
      w: 'can',
      e: 'could',
      r: 'been able to'
    }, {
      q: 'A1: przychodzić, przyjeżdżać',
      w: 'come',
      e: 'came',
      r: 'come'
    }, {
      q: 'A1: robić',
      w: 'do (does)',
      e: 'did',
      r: 'done'
    }, {
      q: 'A1: pić',
      w: 'drink',
      e: 'drank',
      r: 'drunk'
    }, {
 ...