JSFiddle - React, Tailwind, and code Playground

by kapik

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.js"></script>
<script src="http://monospaced.github.io/angular-elastic/elastic.js"></script>
<div ng-controller="ctrl">
    <textarea msd-elastic class="animate" ng-model="test">{{test}}</textarea>
</div>

CSS

html {
      background: #e7f3ff;
      color: #1c000e;
      text-shadow: 0 1px 0 #fff;
    }
    body {
      margin: 8px auto;
      max-width: 90%;
      width: 480px;
    }
    h1 {
      margin: 0 0 8px;
      font-weight: normal;
      font-size: 30px;
    }
    a {
      color: #0074e7;
      text-decoration: none;
      -webkit-transition: all 250ms ease-in-out;
         -moz-transition: all 250ms ease-in-out;
           -o-transition: all 250ms ease-in-out;
              transition: all 250ms ease-in-out;
    }
    a:hover,
    a:focus,
    a:active {
      color: #0067ce;
      -webkit-transition: none;
         -moz-transition: none;
           -o-transition: none;
              transition: none;
    }
    textarea {
      padding: 10px;
      width: 300px;
      max-width: 90%;
    }
    .animate:focus {
      -webkit-transition: height 50ms linear;
         -moz-transition: height 50ms linear;
           -o-transition: height 50ms linear;
              transition: height 50ms linear;
    }
    #first {
      font-size: 30px;
    }

JavaScript

angular.module('app',['monospaced.elastic'])
.controller('ctrl',function($scope){

    $scope.test = "";

});