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="IFrameListCtrl">
  <div ng:repeat="item in items" class="item">
    <table class="title-panel">
      <tr>
        <td>
            <img src="{{item.logo}}" width="64" height="64"/>
        </td>
        <td>
            <span class="title">{{item.title}}</span>
        </td>
        <td>
            <span class="button">save</span>
            <span class="button">delete</span>
        </td>
      </tr>
       <tr>
           <td></td>
           <td colspan='2'>
             <iframe class="content" src="{{item.url}}"></iframe></td>
    </table>
  </div>
</div>

CSS

body { font-family : sans-serif; }
.item { margin-bottom: 40px; padding: 10px;}
.title-panel { margin-bottom: 5px; width: 100%;}
.title-panel tr { padding: 5px; }
.title-panel td {vertical-alignment: middle; }
.title-panel td:nth-child(2) { text-align: left;}
.title-panel td:nth-child(3) { text-align: right;}
.title { font-size: large; color: #555; }
.logo { border: 1px dotted grey; width: 128px; height: 128px; border-radius: 5px; display: inline;}
.separator { height: 1px; background-color: lightgrey; margin-bottom: 10px; }
.content { border: none; width: 400px; height: 300px; overflow: hidden; }
.button { font-size: small; padding: 3px; background-color: whitesemoke; border: thin solid lightgrey; cursor: pointer}
.button:hover { background-color: #06c; color: white}

JavaScript

function IFrameListCtrl () {

    var scope = this;
    
    scope.items = [
        { id : 1,
          title: "Gabardine",
          logo: "http://assets3.qypecdn.net/uploads/photos/0048/1498/fnac-logo_medium.jpg",
          url: "http://www.fnac.pt" },
        
        { id : 2,
          title : "Casacos",
          logo: "http://4.bp.blogspot.com/_3pL_OqPs-dc/Sw14sZwb9UI/AAAAAAAAAJU/9xXKCMCkiGg/s1600/worten_logo_g_1239027023.jpg",
          url : "http://www.ebay.com" }
    ];

};