JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <table>
      <tr>
        <td class = "w"><p class = "bp" id = "1"></p></td>
        <td class = "b"><p class = "bp" id = "2"></p></td>
        <td class = "w"><p class = "bp" id = "3"></p></td>
      </tr>
      <tr>
        <td class = "b"></td>
        <td class = "w"></td>
        <td class = "b"></td>
      </tr>
      <tr>
        <td class = "w"><span class = "wp" id = "4"></span></td>
        <td class = "b"><span class = "wp" id = "5"></span></td>
        <td class = "w"><span class = "wp" id = "6"></span></td>
      </tr>
    </table>
    
  </body>
</html>

CSS

.w{
  background-color:tan;
}
.b{
  background-color:brown;
}
td{
  width:65px;
  height:65px;
  border:1px solid black;
  text-align:center;
}
.wp{
  background-color:white;
    border:2px solid black;
     width: 20px;
  height: 20px;
  padding: 12px;

  border-radius: 50px;
}


.bp{
  background-color:black;
    border: 2px solid white;
     width: 20px;
  height: 20px;
  padding: 12px;

  border-radius: 50px;
  text-indent:10px;
}

JavaScript

const board = [
[1, 2, 3],
[null, null, null],
[4, 5, 6]
]
let squs = document.querySelectAll("td")
let wp = document.querySelectAll("span")
let bp = document.querySelectAll("p")