JSFiddle - React, Tailwind, and code Playground

by gricha2380

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <div id="buttons" class="row">
  <h4>
  Filter by House
  </h4>
    <button class="houseSelector">Gryffindor</button>
    <button class="houseSelector">Hufflepuff</button>
    <button class="houseSelector">Slytherin</button>
    <button class="houseSelector">Ravenclaw</button>
  </div>
  <div class="row">
  <h4>
  Reset
  </h4>
    <button class="reset">reset</button>
  </div>
  <div class="row">
  <h4>
  Toggle Visibility
  </h4>
    <button class="toggle" id="Gryffindor">Gryffindor</button>
    <button class="toggle" id="Hufflepuff">Hufflepuff</button>
    <button class="toggle" id="Slytherin">Slytherin</button>
    <button class="toggle" id="Ravenclaw">Ravenclaw</button>
  </div>


  <table border='1'>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>House</th>
      <th>Gender</th>
      <th>Aligns</th>
    </tr>
  </table>
</body>

<script>
  // list of characters
  var characters = [{
    name: "Albus Dumbledore",
    role: "staff",
    house: "Gryffindor",
    gender: "m",
    alignment: "good"
  }, {
    name: "Nymphadora Tonks",
    role: "",
    house: "Hufflepuff",
    gender: "f",
    alignment: "good"
  }, {
    name: "Ron Weasley",
    role: "student",
    house: "Gryffindor",
    gender: "m",
    alignment: "good"
  }, {
    name: "Ginny Weasley",
    role: "student",
    house: "Gryffindor",
    gender: "f",
    alignment: "good"
  }, {
    name: "Hermione Granger",
    role: "student",
    house: "Gryffindor",
    gender: "f",
    alignment: "good"
  }, {
    name: "Mad-eye Moody",
    role: "staff",
    house: "",
    gender: "m",
    alignment: "good"
  }, {
    name: "Prof McGonagall",
    role: "staff",
    house: "Gryffindor",
    gender: "f",
    alignment: "good"
  }, {
    name: "Harry Potter",
    role: "student",
    house: "Gryffindor",
    gender: "m",
    alignment: "good"
  }, {
    name: "Draco Malfoy",
    role: "student",
 ...

CSS

.over {
     background-color: orange;
   }
   
   .selected {
     background-color: green;
   }