JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<div class="container-fluid">
    <h1>#mini test</h1>
    <div class="mini-test-liftOff">
      <a id="start" href="#mini-test">Let meeee goooo, mini test away!</a>
      <br><i class="fa fa-paper-plane"></i> </div>
    <ul class="so-smooth">
      <li>S</li>
      <li>o</li>
      <li class="space"></li>
      <li>S</li>
      <li>m</li>
      <li>o</li>
      <li>o</li>
      <li>t</li>
      <li>h</li>
      <li></li>
      <li>B</li>
      <li>a</li>
      <li>b</li>
      <li>y</li>
      <li></li>
      <li>w</li>
      <li>e</li>
      <li>e</li>
      <li>e</li>
      <li>e</li>
      <li>e</li>
      <li>!</li>
      
    </ul>
    <div id="mini-test" class="mini-test-height"><i class="fa fa-heart-o"></i>  heya! Test complete!  <i class="fa fa-heart-o"></i>  <a href="#start" class="btn btn-small">Go again?</a></div>
  </div>

CSS

body {
  font-family: avenir, 'avenir next', helvetica, arial, sans-serif;
  background-color: #001F3F;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

code {
  color: black;
}

.space {
  height: 10px;
}

.so-smooth {
  background-color: #0074D9;
  position: relative;
  color: white;
  font-size: 200px;
  margin-left: 50%;
  padding: 4px;
}

.mini-test-liftOff {
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: table;
  table-layout: auto;
  height: 55px;
  width: 190px;
  text-align: center;
  padding: 18px;
  background-color: #FF851B;
}

.mini-test-liftOff a {
  color: white;
  font-size: 30px;
}

.mini-test-liftOff i {
  font-size: 40px;
}

.mini-test-height {
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: table;
  table-layout: auto;
  height: 55px;
  width: 190px;
  background-color: #FF851B;
  text-align: center;
  padding-top: 18px;
  color: #FFF;
  margin-top: 0;
}
#mini-test {
    margin:0;
    width:100%;
  font-size: xx-large;
}
h1 {
  text-transform: uppercase;
  color: #0074D9;
  background-color: #DDD;
  padding: 20px;
  top: 0;
  margin:0;
}

.bg-black {
  background-color: #FF4136;
  padding-left: 1rem;
  padding-right: 1rem;
  padding: 35px;
  margin:0;
}

.aqua {
  color: white;
}

JavaScript

$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top,
        scrollBottom: target.offset().bottom
    }, 3000);
} });