JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br>


<div class="container">
  <small>Item Name Field Default</small>
  <br>

  <div class="row">
    <div class="col-md-2">
      <h2>

        Item Name:</h2>
    </div>
    <div class="col-md-8">
      <input type="text" class="form-control" value="User Entered Text">
      <div class="help block">
      <small>Click to add Text to help Text </small>
      </div>
    </div>
  </div>
  <hr>
  <small>Or Choose from Examples Below</small>
  <br/>
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-2">

          <button class="btn btn-primary btn-sm">Select</button>
        </div>
        <div calss="col-sm-10">
          <b class="example">

2018-01-01 - <span class="form-control">User's text</span></b>
          <small>Date stamp with Custom Text</small>

        </div>

      </div>

    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-2">

          <button class="btn btn-primary btn-sm">Select</button>
        </div>
        <div calss="col-sm-10">
          <b class="example">
ABC-000043
</b>
          <small>Prefix with Auto Number</small></div>
      </div>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-2">

          <button class="btn btn-primary btn-sm">Select</button>
        </div>
        <div calss="col-sm-10">
          <b class="example">

00001 - <span class="form-control">User's text</span></b>
          <small>Auto Number  with Custom...

CSS

.form-control.no-border {
  border: 0;
  display: inline-block !important;
  width: 60px;
  overflow: visible;
}

.form-control {
  /* border:0;   */
  display: inline-block !important;
  width: 200px;
  overflow: visible;
}

.form-control:hover {
  background: aliceblue
}

small {
  display: block;
  color: gray;
}

b.example {
  height: 40px;
  display: block;
}
.help-block {
  margin-top: 10px;
}

JavaScript

$('.tooltip').tooltip();