JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.0/angular-translate.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
    <h1 translate>TITLE</h1>
    <p translate>FOO</p>
    <input type="text" placeholder="{{'TASKDETAILS_LOCATION_PLACEHOLDER' | translate}}" ng-model="selectedTask.location"/>
    
    <p>other syntax: {{'BUTTON_LANG_EN' | translate}}</p>
    
    <select ng-model="curLang" 
            ng-change="changeLanguage(curLang)"
            ng-options="lang for lang in languages">
    </select>
</div>

JavaScript

angular.module('demoApp', ['pascalprecht.translate', 'ngSanitize'])
.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Hello',
    FOO: 'This is a paragraph.',
    BUTTON_LANG_EN: 'english',
    BUTTON_LANG_DE: 'german',
    TASKDETAILS_LOCATION_PLACEHOLDER: 'add details'
  });
  $translateProvider.translations('de', {
    TITLE: 'Hallo',
    FOO: 'Dies ist ein Paragraph.',
    BUTTON_LANG_EN: 'englisch',
    BUTTON_LANG_DE: 'deutsch',
    TASKDETAILS_LOCATION_PLACEHOLDER: 'Details hinzufĂĽgen'
  });
  $translateProvider.preferredLanguage('en');
    $translateProvider.useSanitizeValueStrategy('sanitize');
})
    .controller('MainController', function ($scope, $translate) {
    	$scope.languages = ['en', 'de'];
      $scope.curLang = $scope.languages[0];
      $scope.changeLanguage = function (key) {
        $translate.use(key);
      };
});