JSFiddle - React, Tailwind, and code Playground

by mitwebulus

HTML

<div class="wrapper">
  <h1 class="abtHeader">Astrum.xyz</h1>

  <div id="paragraph"> Astrum - Latin for star, glory, and immortality.
    <br>
  </div>
  <div id="paragraph2"> This social network was created by Skylar Thomas and Zac Hardy in May, 2016. </div>

  <button type="submit" class="register-button" name="Register">Register</button>

  <ul class="bg-bubbles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

CSS

.register-button {
    z-index: 5;
    padding-top: 100px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: white;
  border: 0;
  padding: 10px 15px;
  color: #53E3A6;
	height: 50px;
  border-radius: 5px;
  width: 250px;
  cursor: pointer;
  font-size: 18px;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.register-button:hover {
  background-color: #f5f7f9;
}

JavaScript

$(".register-button").on('click', function(e) {
  window.location.href = "../register";
});