JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form style="flex: 1; padding-right: 60px" class="custom-form d-flex flex-column">

    <h5>IP Address:</h5>
    <div class="input-group" id="toggle-input">
      <input
        class="custom-text-field form-control"
        type="text"
        disabled
      />
      <div class="input-group-append" id="edit-text">
        <span class="input-group-text">
          <i data-feather="edit-2"></i>
        </span>
      </div>
    </div>

    <span style="font-size: 15px; color: #D3455B; font-weight: bold; margin-bottom: 1.5rem; display: block">
    </span>

    <button class="btn btn-primary">Request IP Change</button>
  </form>