JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<div ng-app="myDemoApp">
  <div class="main" ng-class="{ 'started' : hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul><li ng-repeat="msg in vm.messages">{{ msg }}</li></ul>
      <hr>
      <pre>{{vm | json}}</pre>
    </div>
  </div>
</div>

CSS

.main { opacity: 0; padding: 10px; }
.started { opacity: 1; background: gold; transition: all 2s; }
pre { background: white; border: 1px solid #ccc; padding: 10px; margin: 10px; }

JavaScript

angular.module("myDemoApp", ["ng"])
  .service("worldsService", [MyDataService])
  .controller("demoController", ["$scope", "worldsService", DemoController])
  .run(["$rootScope", "$timeout", startup]);
  
function MyDataService() {
  return {
    getWorlds: function getWorlds() {
      return ["this world", "another world"];
    }
  };
}

function DemoController($scope, worldsService) {
  this.messages = worldsService.getWorlds().map(function(w) {
    return "Hello, " + w + "!";
  });
}

function startup($rootScope, $timeout) {
  console.log("Hello, user! Loading worlds...");
  $timeout(function() { $rootScope.hasStarted = true; }, 1500);
}