JSFiddle - React, Tailwind, and code Playground

by joshmoto

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 class="alert alert-hide alert-success mb-0 text-center" role="alert">
  I'm going to disapear in 5000ms 
</div>

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      Bootstrap
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<main class="mt-3 mb-3">
  <div class="container">
    <h2>Test Page</h2>
    <p class="lead">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ante eget ante lacinia eleifend ac id augue. Praesent vulputate varius lacus, sed euismod mi laoreet imperdiet. Fusce ac dapibus ligula. Suspendisse id tristique...

SCSS

.alert {
  margin-top: 0px;
  transition: margin .5s ease-in-out;
}

.alert-hide {
  margin-top: -50px;
}

JavaScript

showAlert = function() {
  $('.alert').removeClass('alert-hide');
}

hideAlert = function() {
  $('.alert').addClass('alert-hide');
}

// auto show
setTimeout(function() {
   showAlert();
}, 1000);

// auto hide
setTimeout(function() {
   hideAlert();
}, 5000);