JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js" ng:autobind></script>

<div ng:controller="TestCtrl">
    <table>
        <tr>
            <td colspan="2">
                <h2>Promotion title</h2>
            </td>                
        </tr>
        <tr>
           <td>
               <input type="text" name="data.title"/>
            </td>
            <td>
                <div class="container">
                <span class="title">{{data.title}}</span>
                </div>
            </td>   
        </tr>
        <tr>
            <td colspan="2">
                <h2>Promotion logo</h2>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="data.logo"/>
            </td>
            <td>
                <div class="container logo">
            <img src="{{data.logo}}" width="64" height="64" />
                </div>
            </td>    
        </tr>    
        <tr>
          <td>
              <h2>Promotion link</h2>
          </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="data.promo"/>
            </td>
            <td>
                <iframe src="{{data.promo}}"></iframe>
            </td>
        </tr>
    </table>
</div>

CSS

body { font-family: sans-serif; }
h2 { color: #777; }
iframe { border: thin solid lightgrey; width: 100%; height: 400px;}
table { }
table tr td { vertical-align: top; padding: 5px;}
.title { font-size: large; color: #06c; }
.container { border: thin solid lightgrey; height: 100%;}
.logo {width: 64px; height: 64px;}

JavaScript

function TestCtrl() {
    
    var scope = this;   
    
    scope.data = {
    
        title: "",
        logo: "",
        promo: ""
    
    };    
    
};