JSFiddle - React, Tailwind, and code Playground

by KANDR101

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">

        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">Gate Codes</h4>
          <p class="text-muted"></p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Apps</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">Tech Locator</a></li>
            <li><a href="#" class="text-white">Gate Codes</a></li>
            <li><a href="#" class="text-white">Cheat Sheets</a></li>
          </ul>
        </div>

      </div>
    </div>
  </div>

  <div class="navbar navbar-light bg-darks boxshadowBottom">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <!--         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
          <circle cx="12" cy="13" r="4"></circle>
        </svg> -->
        <strong>HoustonAir</strong>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
</header>

<div id="bodycontain" class="container">
 ...

CSS

/* Sticky footer styles
-------------------------------------------------- */

/* .footer {
position: absolute;
  bottom: 0;
  width: 100%;
  Set the fixed height of the footer here
height: 60px;
  line-height: 60px;
  Vertically center the text there
  background-color: #f5f5f5;
} */

/* footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}
 */

.boxshadowBottom {
  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, .05);
}

.boxshadowTop {
  box-shadow: .1rem -.1rem .6rem inset rgba(0, 0, 0, .05);
}

JavaScript

$('#img-preview').on('click', '.img-close', function() {
  $(this).parents('#img-preview')
    .removeClass('d-flex').addClass('d-none')
    .children('img').attr('src', '');

  $('#form-attachment .custom-file-label').html('Choose file...');
});