JSFiddle - React, Tailwind, and code Playground

by Puneet Pandey

HTML

<h1>Basic Search</h1>
<table>
  <tr>
    <td width="20%"><input type="checkbox" name="a" value="a" checked />A</td>
    <td width="20%"><input type="checkbox" name="b" value="b" />B</td>
    <td width="20%"><input type="checkbox" name="c" value="c" />C</td>
  </tr>
</table>

<h1>Advanced Search</h1>
<h3>Set 1</h3>

<table>
  <tr>
    <td width="20%">
      <input type="checkbox" name="d" value="d" checked />D <small>(90)</small></td>
    <td width="20%"><input type="checkbox" name="e" value="e" />E <small>(80)</small></td>
    <td width="20%"><input type="checkbox" name="f" value="f" />F <small>(70)</small></td>
  </tr>
  <tr>
    <td width="20%"><input type="checkbox" name="g" value="g" checked />G <small>(60)</small></td>
    <td width="20%"><input type="checkbox" name="h" value="h" />H <small>(50)</small></td>
    <td width="20%"><input type="checkbox" name="i" value="i" />I <small>(40)</small></td>
  </tr>
  <tr>
    <td width="20%"><input type="checkbox" name="j" value="j" checked />J <small>(30)</small></td>
    <td width="20%"><input type="checkbox" name="k" value="k" />K <small>(20)</small></td>
    <td width="20%"><input type="checkbox" name="l" value="l" />L <small>(10)</small></td>
  </tr>
</table>

<h3>Set 2</h3>
<table>
  <tr>
    <td width="20%">
      <input type="checkbox" name="m" value="m" />M <small>(150)</small></td>
    <td width="20%"><input type="checkbox" name="n" value="n" />N <small>(160)</small></td>
  </tr>
  <tr>
    <td width="20%"><input type="checkbox" name="o" value="o" />O <small>(170)</small></td>
    <td width="20%"><input type="checkbox" name="p" value="p" checked />P <small>(50)</small></td>
  </tr>
  <tr>
    <td width="20%"><input type="checkbox" name="q" value="q" checked />Q <small>(30)</small></td>
    <td width="20%"><input type="checkbox" name="r" value="r" />R <small>(20)</small></td>
  </tr>
</table>