JSFiddle - React, Tailwind, and code Playground

by KheKhe

HTML

<link rel="stylesheet" href="https://bgrins.github.io/spectrum/spectrum.css">
<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
<table class="outer-table">
  <tbody>
  
    <tr>
      <td colspan="3">
        <table class="inner-table">
          <tbody>
            <tr>
              <td>
                <p class="input-label">Name of Color </p>
                <input class="input-field color-name" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <p class="input-label">Outline Color </p>
                <input class="input-color-picker basic outline-color-picker" value="black" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <p class="input-label">Fill Color </p>
                <input class="input-color-picker basic fill-color-picker" value="black" type="text" />
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    
    <!-- ------------------------------------------------- -->
    <!-- ------------------------------------------------- -->
    <!-- ------------------------------------------------- -->
    
    <tr>
      <td colspan="3">
        <table class="inner-table">
          <tbody>
            <tr>
              <td>
                <p class="input-label">Name of Color </p>
                <input class="input-field colorName" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <p class="input-label">Outline Color </p>
                <input class="input-color-picker basic outline-color-picker" value="black" type="text" />
              </td>
            </tr>
            <tr>
              <td>
                <p class="input-label">Fill Color </p>
                <input class="input-color-picker basic fill-color-picker" value="black" type="text" />
              </td>
            </tr>
          </tbody>
        </table>
  ...

CSS

.outer-table tr {
  margin:10px;
}

.inner-table {
  border:2px solid yellow;
}

JavaScript

$(".basic").spectrum({});