JSFiddle - React, Tailwind, and code Playground

HTML

<header class="top-bar"></header>
	<section class="main">
		<div class="box"></div>
	</section>

CSS

body, html{
	min-height:100%;
	height:100%;
  margin:0px;
	overflow:hidden;
}
.top-bar{
	width:100%;
	height:50px;
	background-color:#022b3a;
	position:fixed;
	left:0;
	z-index:50;
	box-shadow:0px 1px 4px rgba(0,0,0,0.3);
	 -webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}

.box{
	background:#fff;	
	width:150px;
	height:150px;
	margin:25px auto;

}

section.main {
  min-height: 100%;
  height: 100%;
  background-color: #43c3f8;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF43C3F8', endColorstr='#FF307ECE');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iODAiPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjNDNjM2Y4Ii8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiMzMDdlY2UiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 80, color-stop(20%, #43c3f8), color-stop(80%, #307ece));
  background-image: -webkit-radial-gradient(center, circle cover, #43c3f8 20%, #307ece 80%);
  background-image: -moz-radial-gradient(center, circle cover, #43c3f8 20%, #307ece 80%);
  background-image: -o-radial-gradient(center, circle cover, #43c3f8 20%, #307ece 80%);
  background-image: radial-gradient(center, circle cover, #43c3f8 20%, #307ece 80%);
}
@-webkit-keyframes flow{

	0% {
		top:-100px;
	}

	100% {
		top: 75px;
	}

}
@keyframes flow{

	0% {
		top:-100px;
	}

	100% {
		top: 75px;
	}

}

		@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
   ...

JavaScript

$('.top-bar').addClass('animate-flow');
     $('.box').addClass('bounce');