JSFiddle - React, Tailwind, and code Playground

by alex fripp

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
 <div ng-app="app">

    <div class='wrap' ng-controller="loginCtr">
        <form name="frmLogin" ng-submit="send()" >
            <div class="textWrap">
                <label class='txt' focus-input >Username</label>   
                <input ng-model="username" type="text" hasfocus />    
            </div>  
            
              <div class="textWrap">
                <label class='txt' focus-input>Password</label>   
                <input ng-model="password" type="password" hasfocus />    
            </div>
            <input type="submit" value="Login"/>
        </form>
    </div>
  </div>

CSS

.active{
  background:black;
  top:-2em !important;
  padding:0.3em;
  color:#fff !important;
}
.textWrap{
  position:relative;
  margin:2.5em 0px;
  height:2em;
  
}
.txt{
  position:absolute;
  left:0px;
  top:10%;
  color:#333;
   transition: all 0.1s ease-in-out;
}
.txt:hover{
  cursor: text;
}
input[type="text"],input[type="password"]{
  width:100%;
  border:none;
  font-size:1.5em;
  border-bottom:1px solid #666;
  outline:none;
}

button{
  background:salmon;
  border:none;
  width:100%;
  color:#fff;
  font-size:1.5em;
  
}

.wrap{
  width:30%;
  margin:10% auto;
  min-width:20em;
}

JavaScript

var app = angular.module('app', []);

app.directive('focusInput', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
          element.parent().find('input')[0].focus();
      });
    }
  };
});


app.directive('hasfocus', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('blur', function() {
          if(!element[0].value){
            element.parent().find('label').removeClass('active');
          }
      });
      element.bind('change', function() {
          if(!element[0].value){
            element.parent().find('label').removeClass('active');
          }
      });
      element.bind('focus', function() {
        element.parent().find('label').addClass('active');
      });
    }
  };
});




app.controller('loginCtr', function($scope) {
  
  $scope.send = function(){
   //1. ajax to send data
   //2. if response is true reset form... 
    $scope.password = "";
    $scope.username = "";
    $scope.frmLogin.$setPristine();
  };
  
  
  
});