JSFiddle - React, Tailwind, and code Playground

by mollwe

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="DemoController">
<span>Active color: {{activeColor}}</span>
  <div class="question-text" ng-style="{'background-color':activeColor}">
    <h2>Home Page</h2> Do you want to know the best country to travel to for your budget, tastes, and preferences?
    <br />
    <button ui-sref="q1" ng-click="changeColor()">Let's Get Started</button>
  </div>

</div>

CSS

.question-text {
  transition: background-color 1s ease-in-out;
}

JavaScript

var app = angular.module('demo', [])
  .controller('DemoController', function($scope) {
    var colors = ['#FF4D63', '#3848AC', '#513584', '#9D4075', '#4D7AFF', '#875EEF', '#525561'];
    $scope.activeColor = 'inherit';
    $scope.changeColor = function() {
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      $scope.activeColor = randomColor;
    };
  });
angular.bootstrap(document, ['demo']);