JSFiddle - React, Tailwind, and code Playground

by Hiral Vadodaria

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div class="main-holder">
<form action="javascrip:void(0)" method="post">
  <input type="text" placeholder="username"/>
  <div class="clear">
  </div>
  <input type="password" placeholder="password"/>
  <button type="submit" class="login">
  Login
  </button>
  </form>
</div>

CSS

body{padding:0;}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
	background:none !important;
    background-color: rgb(0,0,0,0) !important;
	
    background-image: none !important;
    color: rgb(0, 0, 0);
	-webkit-box-shadow:none !important;
	-moz-box-shadow:none !important;
	box-shadow:none !important;
}

.main-holder{width:100%;padding:100px 0;background:url(http://loopele.com/wp-content/uploads/2014/03/tumblr-wallpapers.jpg) no-repeat center center;text-align:center;}
input{height:30px;background:none;border:none;border-bottom:1px solid #fff;margin: 0 0 15px;width:300px;color:#fff;}
input:focus,
input:hover,
input:active{box-shadow:none;outline:none;}
.clear{clear:both;}

.main-holder input::-webkit-input-placeholder {
    color: #efefef;
	
}
.main-holder input:-ms-input-placeholder {
    color: #efefef;
	
}
.main-holder input::-moz-placeholder {
    color: #efefef;
	
	opacity:  1;
}

JavaScript

$(document).ready(function(){

	$(".login").click(function(){
  	alert("login is being processed...");
  
  });
});