JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
<script src="http://angular-ui.github.io/ui-ace/dist/ui-ace.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//public.opencpu.org/js/archive/opencpu-0.4.js"></script>
<body ng-app="myApp" ng-controller="MainCtrl">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
          <div ng-model='example' ui-ace="aceOptions">{{ example }}</div>
          <input type='submit' value='Submit' class='btn btn-success' ng-click='makeChart()' />
      </div>
      <div class="col-md-8">
          <iframe id="output" seamless></iframe>
      </div>
       <textarea id='code' style='display:none;'>
spp <- c("Danaus plexippus", "Accipiter striatus", "Pinus contorta")
dat <- occ(query = spp, from = "gbif", limit=5, gbifopts = list(georeferenced = TRUE))
occ2df(dat)       
</textarea>
    </div>
  </div>
</body>

CSS

.ace_editor  {
  height : 100px;
}
#output{
  width: 100%;
  height: 300px;
}

JavaScript

var myApp = angular.module('myApp', ['ui.ace'])
ocpu.seturl("//ropensci.ocpu.io/spocc/R")


myApp.controller('MainCtrl', function($scope){
   $scope.aceOptions = {
     theme: 'tomorrow',
     mode: 'r',
     useWrapMode : true
   }
   $scope.example = $('#code').val()
   var mysnippet = new ocpu.Snippet("{" + $scope.example + "}");
   $scope.makeChart = function(){
     var req = ocpu.call("mapleaflet", {
       "data" : mysnippet
     }, function(session){
       $("#output").attr('src', session.getFileURL("map/map.html"));
     }).fail(function(text){
      alert("Error: " + req.responseText);
     });  
   }
})