JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.17"></script>
<div>
  <h1 class="big-text"> 
  Aplicativo Eletrosul
  </h1>
</div>

<div id="row" class="down">
  <i><img id="your_link_button" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png"></i>
</div>

CSS

body {
  margin: 0;
  background: url(https://pcbx.us/beoh.jpg);
  background-attachment: fixed;
  background-size: cover;
}

.big-text {
  text-align: center;
  color: #2C2C2C;
  font-family: pt sans narrow;
  font-weight: 100;
  font-size: 4em;
}

h2 {
  font-family: pt sans narrow;
  text-transform: uppercase;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.85);
}

#container {
  background: #303030;
  text-align: center;
  color: #FFF;
  font-size: 2em;
  height: 50%;
  width: 100%;
  bottom: 0;
}

.hidden {
  display: none;
}

#row {
  background: #303030;
  width: 100%;
  text-align: center;
  height: 28;
  bottom: 0;
  position: fixed;
}

#your_link_button {
}

JavaScript

$('#row').click(function() {

	if($("#row").hasClass("down")){
  	  $("#row").removeClass("down");
      $("#row").animate({height : "50%"},600);
      
  }else{
  		
  		$("#row").animate({height : 28},350);
      $("#row").addClass("down");
  }

});