JSFiddle - React, Tailwind, and code Playground

JT Form

by Christopher O

HTML

<!--  Tab href must match content div id -->
<div id="tabs">
    <ul>
        <li><a href="#tabAdd" id="tLblAdd">Add Ticket</a></li>
        <li><a href="#tabRdy" id="tLblRdy">Ready for Pickup<span id="tLblRdyCnt" class="cnt"> (3)</span></a></li>
        <li><a href="#tabAll" id="tLblAll">All<span id="tLblAllCnt" class="cnt"> (19)</span></a></li>
        <li><a href="#tabVal" id="tLblVal">Valets</a></li>
        <li><a href="#tabBrd" id="tLblBrd">Broadcast</a></li>
    </ul>
    <div id="tabAdd">
        <form id="addticketfrm">
        <label>Ticket #:</label> <input type="number" name="t" style="width:100px" /><br /><br />
        
        <label>Ph #:</label> <input type="tel" name="p" style="width:170px" /><br /><br />
        
        <label>Type:</label> <span id="radio-v">
		<input type="radio" id="radio-v1" name="v"><label for="radio-v1">Car</label>
		<input type="radio" id="radio-v2" name="v"><label for="radio-v2">Truck/SUV</label>
		<input type="radio" id="radio-v3" name="v"><label for="radio-v3">Other</label>
	</span><br /><br />
  
  <label>Color:</label> <span id="radio-c">
		<input type="radio" id="radio-c1" name="c"><label for="radio-c1" style="color:#000">Blk</label>
		<input type="radio" id="radio-c2" name="c"><label for="radio-c2" style="color:#bbb">Wht</label>
    <input type="radio" id="radio-c99" name="c"><label for="radio-c99" style="color:aaa">Gry</label>
		<input type="radio" id="radio-c3" name="c"><label for="radio-c3" style="color:blue">Blu</label>
    <input type="radio" id="radio-c4" name="c"><label for="radio-c4" style="color:green">Grn</label>
    <input type="radio" id="radio-c5" name="c"><label for="radio-c5" style="color:orange">Org</label>
    <input type="radio" id="radio-c6" name="c"><label for="radio-c6" style="color:red">Red</label>
    <input type="radio" id="radio-c7" name="c"><label for="radio-c7" style="color:purple">Purp</label>
    <input type="radio" id="radio-c8" name="c"><label...

CSS

body{
	background-color: #aaa;
  padding:8px;
  
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.cnt{
  color:#aaf;
}

/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left.  Normally this would be done in your <head> */

JavaScript

$("#tabs").tabs({
      activate: function (event, ui) {
          var active = $('#tabs').tabs('option', 'active');
          //$("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));
          $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("id"));

      }
  }
);

$( "#radio-v" ).buttonset();
$( "#radio-c" ).buttonset();