JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<style>
    .codegen-widget {
        padding: 1em;
        background-color: #eaf3fa;
        font: normal 16px tahoma, geneva, verdana, sans-serif;
    }
    .codegen-widget small {
        font-size: 75%;
    }
    .codegen-widget input {
        font: normal 16px tahoma, geneva, verdana, sans-serif;
        color: #000;
    }
    .codegen-widget input.ng-invalid {
        color: #f00;
    }
    .codegen-widget textarea {
        width: 100%;
        font-size: 14px;
        font-family: Consolas, Menlo, Monaco, Lucida Console, monospace, serif;
    }
    .codegen-widget table.layout-example {
        border-collapse: separate;
        border-spacing: 3px;
    }
    .codegen-widget table.layout-example td {
        padding: 1px;
        border: 2px solid #808080;
    }
    .codegen-widget .hidden {
        display: none;
    }
    .codegen-widget a.localaction {
        text-decoration: none;
        border-bottom: 1px dashed;
    }
</style>
<script type="text/javascript">    
    angular.module('CodeGenerator', []);
</script>
<div ng-app="CodeGenerator" class="codegen-widget" ng-form name="CodeGenWidget">    
    <p>
      Yotpo API key: <input type="text" size="50" placeholder="Enter your Yotpo API key here" ng-model="yotpo_key">        
    </p>
        <p><i>You personal Yotpo API key can be found on the <a href="https://www.yotpo.com/settings">'Account settings'</a> page in your Yotpo admin backend</i></p>
    <p>
    <textarea readonly rows="8" cols="80" ng-disabled="CodeGenWidget.$invalid">
&lt;script type=&quot;text/javascript&quot; src=&quot;//ecwid-static.s3.amazonaws.com/widgets/EcwidYotpoWidgets.js&quot;&gt;&lt;/script&gt;
&lt;script&gt; 
EcwidYotpoWidgets.load({
  yotpoAppKey: '{{yotpo_key}}'
});
&lt;/script&gt;</textarea>
    </p>
</div>