JSFiddle - React, Tailwind, and code Playground

by Vince Oveson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form method="post" action="/dashboard" id="form">
 <!-- {{ csrf_field() }} -->
  <table class="table table-hover">
   <thead class="text-warning" align="center">
     <th>No.</th>
     <th>Subject Name</th>
     <th>Subject Code</th>
     <th>Subject Group</th>
     </thead>
     <tbody>
      <tr align="center">
        <td>1</td>
        <td>A</td>
        <td>S01</td>
        <td>
          <div class="col">
              <select class="form-control" name="sub_group_1">
              <option disabled selected>Assign Group...</option>
              <option value="group1">Group 1</option>
              <option value="group2">Group 2</option>
              <option value="group3">Group 3</option>
              </select>
          </div>
        </td>
      </tr>
      <tr align="center">
        <td>2</td>
        <td>B</td>
        <td>S02</td>
        <td>
          <div class="col">
              <select class="form-control" name="sub_group_2">
              <option disabled selected>Assign Group...</option>
              <option value="group1">Group 1</option>
              <option value="group2">Group 2</option>
              <option value="group3">Group 3</option>
              </select>
          </div>
        </td>
      </tr>
      <tr align="center">
        <td>3</td>
        <td>C</td>
        <td>S03</td>
        <td>
          <div class="col">
              <select class="form-control" name="sub_group_3">
              <option disabled selected>Assign Group...</option>
              <option value="group1">Group 1</option>
              <option value="group2">Group 2</option>
              <option value="group3">Group 3</option>
              </select>
          </div>
        </td>
      </tr>
     </tbody>
    </table>
    <button type="submit" class="btn btn-primary">Save</button>
   </form>
   <div class="code">
   <pre><code id="code"></code></pre>
   </div>

CSS

.table {
    border: solid 1px #454545;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.table thead th {
    background-color: #454545;
    border: solid 1px #454545;
    color: #fff;
    padding: 10px;
    text-align: left;
}
.table tbody td {
    border: solid 1px #454545;
    color: #333;
    padding: 10px;
}
.code {
  width: 350px;
  background-color: #dfdfdf;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
}
.btn {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #009eff;
  color: white;
  border-radius: 5px;
  border: none;
  font-size: 1rem;
  
}

JavaScript

$(function() {
	var $form = $('#form');
  $form.on('submit', function(e) {
    e.preventDefault();
    $('#code').html(JSON.stringify($form.serializeArray(), null, 2));
  })
});