JSFiddle - React, Tailwind, and code Playground

by DugSohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h2> Edit  Mode</h2>
<br>
<form class="form-horizontal">

 <div class="form-group has-warning">
    <label for="exampleInputEmail1">Some Label </label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Some Label</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
<hr>
        <label for="">My Signature</label>

  <div class="checkbox">

    <label>
      <input type="checkbox" checked> I  agrees to provide my digital signing this {resrouce type}. Clicking create signature below an authenic digitally signed document. 
    </label>
  </div>
  </div>
  <div class="form-group">

<div class="input-group proto-unsigned">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button" id="proto_signing">Create My Signature</button>
      </span>
      <input type="text" class="form-control" placeholder="X ____________________" disabled="disabled">
    </div><!-- /input-group -->
    
    <div class="ui-form-control-value ui-signature" style="display:none">
        <label for="exampleInputEmail1">Signed by</label>

   <span class="ui-fancy-sig"> Douglas Sohn</span> <small class="muted">on Timestamp</small>
    </div>
  </div>
  <!-- <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div > 
  </div>-->
</form>

CSS

body {
    padding: 100px;
    background: #f7f8f9;
}
.ui-fancy-sig {
  font-family: Florence, cursive;
  font-style: underline;
  font-weight: bold;
  font-size: 20px
}

JavaScript

$('#proto_signing').click( function() {

$('.proto-unsigned').hide();

$('.ui-signature').show();


});