JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="subheader">
    <div class="register">
      <p>Login
      </p>
      <p>|</p>
      <p>Register</p>
    </div>
    <div class="forms">
      <form class="registers" action="demo_form.asp">
        <input class="registerformsleft" type="email" name="email" value="Email" placeholder="Format: [email protected]" onfocus="if (this.value=='Email') this.value='';">&nbsp;&nbsp;

        <input class="registerformsright" type="password" name="Password" size="10" value="Password" onfocus="if (this.value=='Password') this.value='';">
        <input class="submit" type="submit" value="Submit">
      </form>
    </div>

CSS

.subheader {
  background: #F3F3F3;
  margin: 0 auto;
  width: 100%;
  height: 30px;
}
.register p {
  display: inline-block;
  float: right;
  color: #179B75;
  font-size: 12px;
  padding: 0;
  padding-right: 8px;
}
.register {
  display: block;
  left: 75%;
  position: fixed;
  top: 5px;
  z-index: 10005;
  height: 30px;
}
.register>p>input {
  width: 100px;
  height: 20px;
  border: 1px solid #c8c8c8;
  font-family: FuturaLight;
  text-indent: 20px;
  font-size: 12px;
  float: right;
  display: none;
  color: #179B75;
}
.register>p>input:enabled {
  cursor: text;
}
.forms {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registers {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registerformsleft {
  width: 130px;
  height: 25px;
  display: inline-block;
  position: inherit;
  float: left;
}
.registerformsright {
  width: 130px;
  height: 25px;
  display: inline-block;
  position: inherit;
 
}
.register {
  cursor: pointer;
}

JavaScript

$(document).ready(function() {

  $('.register').click(function() {
    $('.register').hide()
  });

  $('.registers').hide();

  $('.register').click(function() {
    $('.registers').show();
  });

  $(document).mouseup(function(e) {
    var container = $(".registers");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      container.hide();
      $('.register').show();
    }
  });

});