JSFiddle - React, Tailwind, and code Playground

by bytestream

HTML

<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<style>
  form * {
    text-align: center;
  }
</style>


<form method="POST" class="needs-validation" id="formAA" novalidate="novalidate">
  <div class="mb-3">
    <label for="a" class="form-label">A</label>
    <input type="text" class="form-control form-control-lg text-center" id="a" name="a" maxlength="100" required="">
  </div>
  <div class="divdropdowncolor mb-3 text-center">
    <label for="selectcolor" class="form-label">B</label><br>
    <input class="form-control form-control-lg" type="color" id="selectcolor" name="selectcolor" value="#0AF000" style="display:inline-block; width:48%; vertical-align: middle; float:left;">
    <input type="text" class="form-control form-control-lg text-center error" id="selectcolorB" name="selectcolorB" placeholder="#FFFFFF" maxlength="7" style="display:inline-block; width:48%; vertical-align: middle; float:right;" col="7" aria-invalid="true">
  </div>
  <div class="mb-3" style="clear:both;"></div>
  <button type="submit" class="btn btn-primary form-control-lg" style="width:100%;">Submit</button>
</form>







<!-- scripts -->
<script>
  function isValidColor(str) {
    return str.match(/^#[a-f0-9]{6}$/i) !== null;
  }
  $(document).ready(function() {
    $('#selectcolorB').val($('#selectcolor').val());
  });
  $('#selectcolor').on('change', function(event) {
    $('#selectcolorB').val($('#selectcolor').val());
  });
  $('#selectcolorB').on('change',...