JSFiddle - React, Tailwind, and code Playground

by vrmtm

HTML

<form method="post" action="./Login.aspx" id="form1">





<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C2EE9ABB">
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="Gz8Jc6V0It+VNDbGTReNNU39kqnQkIlKUk/GLkShyjPs4RgyTJFJ5D4AnkExha3x539haVRRFeGcXHMPv5AM99KVT2X0d7iZ3Jucdb2wgFRINXINus+XlxFwKAr6YNUCt0GMEoMJvzCYJIDtaqyjbivAEfAK3ksMWz5JsmS5d4Y=">
</div>
  <div id="div">
    <div class="rowWrap">
      <div class="cellWrap">
        <div class="contentWrap">
          <div class="paddingWrap">
            <img class="logo" src="https://app.flowforma.com/_layouts/15/FlowForma/css/images/FlowForma-applogo.png" alt="FlowForma - effortless process management">
            <div id="inputwrap">
              <div class="labelWrap">
                <div class="label">User name</div>
                <input class="inputField" name="userName" type="text" id="userName">
              </div>
              <div class="labelWrap">
                <div class="label">Password</div>
                <input class="inputField" name="password" type="password" id="password">
              </div>              
              <div class="buttonWrap">
                <input type="button" name="btnLogin" value="Login" onclick="javascript:__doPostBack('btnLogin','')" id="btnLogin">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

CSS

* {
  box-sizing: border-box;
}
html,body{ 
  margin:0;
  min-height: 100%;
  height: 100%;
}

body {
  background: url(https://app.flowforma.com/_layouts/15/FlowForma/css/images/FlowForma-Wave-Color.jpg) 0px 0px / 100% 100%;
  font-family: "Segoe UI Semilight","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
}

#form1 {
  height: 100%;
  background: rgba(255,255,255,0.4);
}

#div {
  display: table;
  width: 100%;
  height: 100%;
}

.rowWrap {
  display: table-row;
  width: 100%;
}

.cellWrap {
  display: table-cell;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

.contentWrap {
  display: inline-block;
  background: #ffffff;  
  border: 1px solid #929292;
  overflow: hidden;
  height: 0;
  width: 0;
}

.paddingWrap {
  padding: 25px 40px;
}

.logo {
  width: 180px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

.labelWrap {
  position: relative;
  margin-top: 20px;
}

.labelWrap .label {
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 15px;
  -moz-transition: top 0.2s;
  -o-transition: top 0.2s;
  -webkit-transition: top 0.2s;
  transition: top 0.2s;
}

.labelWrap .label.moveTop {
  top: -20px;
}

.labelWrap input[type="text"],
.labelWrap input[type="password"] {
  height: 28px;
  font-size: 15px;
  width: 200px;
  border: 1px solid #bababa;
  padding: 0 5px;
  font-family: "Segoe UI Semilight","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
}

.labelWrap input[type="text"]:hover,
.labelWrap input[type="text"]:focus,
.labelWrap input[type="password"]:hover,
.labelWrap input[type="password"]:focus{
  border-color: #62b865;
  outline: 0;
  -webkit-appearance: none;
}

.label, .labelWrap input[type="text"],
.label, .labelWrap input[type="password"]{
  text-align: left;
}

.buttonWrap {
  text-align: center;
  padding-top: 15px;
}

.buttonWrap input[type="button"] {
   width: 90px;
   line-height: 24px;
   font-size: 16px;
   background: #f4f4f4;
   border: 1px solid #d6d6d6;
   cursor: pointer;
}

.buttonWrap...

JavaScript

$(document).ready(function() {
	$(".inputField").on("focus", function() {
  	$(".label").addClass("moveTop");
  });
  
  $(".label").on("click", function() {
    $(".label").addClass("moveTop");
    $(this).next(".inputField").focus();
  });
  
  var contentWrap = $(".contentWrap");
  setTimeout(function () {
  	elem = contentWrap.clone().css({
      "width": "auto"
    }).appendTo("body");
    width = elem.css("width"), elem.remove();

    contentWrap.animate({
      "width": width
    }, 250, function() {
    	contentWrap.animate({ height: contentWrap.get(0).scrollHeight }, 200, function () {
        $(this).height('auto');
      });
    });    
	}, 250);  
});