JSFiddle - React, Tailwind, and code Playground

by soumya gangamwar

HTML

<!DOCTYPE html>
<html>
<body>

<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

<p id="demo"></p>

<table>
  <tr>
    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
  </tr>
  <tr>
    <td>...<strong>Northwest</strong>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>...2 more lines of this kind...</tr>
  <tr>...2 more lines of this kind...</tr>
</table>
</body>
</html>

CSS

#bagua-table th {
  text-align: center;
  font-weight: bold;
}

#bagua-table td {
  width: 150px;
  white-space: nowrap;
  text-align: center;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 12px;
}

#bagua-table .nw {
  background: #999;
}

#bagua-table .n {
  background: #03f;
  color: #fff;
}

#bagua-table .ne {
  background: #ff6;
}

#bagua-table .w {
  background: #ff0;
}

#bagua-table .c {
  background: #60c;
  color: #fff;
}

#bagua-table .e {
  background: #09f;
  color: #fff;
}

#bagua-table .sw {
  background: #963;
  color: #fff;
}

#bagua-table .s {
  background: #f60;
  color: #fff;
}

#bagua-table .se {
  background: #0c3;
  color: #fff;
}

#bagua-table .highlight {
  background: red;
}

JavaScript

document.getElementById("demo").innerHTML = "Hello JavaScript!"