JSFiddle - React, Tailwind, and code Playground

by Zaiste

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<body ng-app="app" ng-controller="MainCtrl">
  <input type="text" name ng-model="name" />
  <button ng-click="greet()">Confirm</button>
  <h3>{{ greetings }}</h3>
</body>

JavaScript

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

app.controller('MainCtrl', function($scope) {
  $scope.greet = function() {
    $scope.greetings = "Hello, " + $scope.name + '!';
  }
    
});

app.directive('name', function() {
  return {
    link: function(scope, element, attrs) {
        element.bind("mouseenter", function () {
            element.attr('placeholder', "What's your name");
        });
    }
  };
});