JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0/ember.prod.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.0/holder.js"></script>
<script type="text/x-handlebars">
<div class="container">
<div class="row">    
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#entities">Entities</a></li> 
  <li><a href="#myCases">My Cases</a></li>
  <li><a href="#myEntities">My Entities</a></li>
  <li><a href="#notifications">Notifications</a></li> 
  <li><a href="#mySources">My Sources</a></li> 
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="entities">
    <div class="list-group">
    {{#each entities}}
        <a href="#" class="list-group-item">{{label}}</a>
    {{/each}}
    </div>
  </div>
  <div class="tab-pane" id="myCases">
    <div class="list-group">
    {{#each myCases}}
       <a href="#" class="list-group-item">{{label}}</a>
    {{/each}}
    </div>
  </div>
  <div class="tab-pane" id="myEntities">
    <div class="list-group">
    {{#each myEntities}}
       <a href="#" class="list-group-item">{{label}}</a>
    {{/each}}
    </div>
  </div>
  <div class="tab-pane" id="notifications">
    <div class="list-group">
    {{#each notifications}}
       <a href="#" class="list-group-item">{{label}}</a>
    {{/each}}
    </div>
  </div>
  <div class="tab-pane" id="mySources">
    <div class="list-group">
    {{#each mySources}}
       <a href="#" class="list-group-item">{{label}}</a>
    {{/each}}
    </div>
  </div>
</div>
<div id="baseball-card">
    <div class="row">
    <div class="col-sm-4">
        <img src="holder.js/150x150/social"/></img>
    </div>
    <h3 class="baseball-card-name col-sm-8"></h3>
    <button type="button" class="btn...

CSS

.tab-content {
    border: 1px solid #ddd;
    height: 350px;
}
#baseball-card {
    border: 1px solid #ddd;
    display: none;
    position: absolute;
    height: 350px;
    left: 40%;
    
    top: 40px;
}

JavaScript

window.App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    entities: [
        { label: 'Entity 1' },
        { label: 'Entity 2' },
        { label: 'Entity 3' },
        { label: 'Entity 4' },
        { label: 'Entity 5' },
        { label: 'Entity 6' }
    ],
    myCases: [
        { label: 'Case 1' },
        { label: 'Case 2' },
        { label: 'Case 3' }
    ],
    myEntities: [
        { label: 'Entity 1' },
        { label: 'Entity 2' },
        { label: 'Entity 3' },
        { label: 'Entity 4' },
        { label: 'Entity 5' }
    ],
    notifications: [
        { label: 'Notification 1' },
        { label: 'Notification 2' },
        { label: 'Notification 3' },
        { label: 'Notification 4' },
        { label: 'Notification 5' },
        { label: 'Notification 6' },
        { label: 'Notification 7' },
        { label: 'Notification 8' }
    ],
    mySources: [
        { label: 'Source 1' },
        { label: 'Source 2' },
        { label: 'Source 3' },
        { label: 'Source 4' },
        { label: 'Source 5' }
    ]
});

setTimeout(function() {
$('#myTab a').click(function (e) {
  e.preventDefault()
  $('.tab-content').width('100%');
  $('#baseball-card').hide();
  $(this).tab('show')
});
    
    $('.list-group-item').click(function() {
        
        var label = $(this).text();
        
        $('.baseball-card-name').text(label);
        $('.tab-content').animate(
            { width: '36%' }, 
            { complete: function() {
                    $('#baseball-card').fadeIn();
                }
            });
        
    });
    Holder.run();
    console.log('ready!');
}, 500);