JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dev.joshmoto.wtf/iris/dist/iris.min.js"></script>
<!-- Gravity forms html mark up below -->

<div class="container pt-3">
  <form>
    <div class="form-row">
      <div class="form-group col-4">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#00e4bc"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#ffffff" />
        </div>
      </div>
    </div>
  </form>
</div>

SCSS

.input-group-prepend {
  .input-group-text {
    &::before {
      width: 18px;
      content: "";
      display: block;
      height: 1px;
    }
  }
}

JavaScript

(function($) {

  $('#color_picker').iris({
    change: function(event, ui) {
      // change the prepend indicator
      $(this).siblings().find('.input-group-text').css('background-color', ui.color.toString());
    }
  });

})(jQuery);