JSFiddle - React, Tailwind, and code Playground

by Michael Baas

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">
<div id="settings" class="modal show" role="dialog" tabindex="-1" data-backdrop="true" data-focus="false" data-keyboard="true" data-show="false" style="display: block; padding-left: 17px;">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Settings</h3>
      </div>
      <div class="modal-body">
        <form data-an-count="3" data-an-form-handler="yp0lu">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
              <a class="nav-link active show" aria-controls="general" id="general-tab" href="#general" role="tab" data-toggle="tab" aria-selected="true">General</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-controls="session" id="session-tab" href="#session" role="tab" data-toggle="tab" aria-selected="false">Session</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-controls="sumwiz" id="sumwiz-tab" href="#sumwiz" role="tab" data-toggle="tab" aria-selected="false">Summary Wizard</a>
            </li>
          </ul>
          <div id="tab-content">
            <div id="general" class="tab-pane fade active show" aria-labelledby="general-tab" role="tabpanel">
              <div class="form-inline">
                <label class="col-9 text-right justify-content-start" for="decp">Decimals for Percentages</label> <input id="decp" class="col-3 text-right autoNumeric form-control" name="decp"...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}