JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<link rel="stylesheet" href="http://foundation.zurb.com/stylesheets/docs/presentation.css">
<div class="row">
    
    <article id="sidepanels" class="four columns">

    <section class="twelve columns chrome" ng-repeat="panel in sidepanels">
        <h2 class="twelve columns">
            <span class="twelve">
                <i class="icon {{panel.icon}}"></i>
                {{panel.controller.name}}
                <span class="two right text-right">
                    <i class="icon icon-resize-small"></i>
                    <i class="icon icon-arrow-right"></i>
                </span>
            </span>
        </h2>
        <div ng-include src="'views/'+panel.controller.name.toLowerCase()+'.html'" ng-controller="panel.controller"><!-- panel body -->
        </div><!-- /panel body -->
    </section>
    
</article><!-- /#sidebar -->

<div id="top_chrome" class="two columns offset-by-one">
    <header id="statusbox" class="twelve columns">
        <ul class="unstyled">
            <li ng-repeat="status in statuses">{{status}}</li>
        </ul>
    </header>

    <footer id="toolbar" class="twelve columns">
        <div class="twelve columns">
            <ul  class="unstyled inline twelve columns">
                <li class="five columns icon">Datetime</li>
                <li class="five columns icon">Search</li>
            </ul>
        </div>
    </footer>
</div>

<div id="user_menu" class="two columns chrome">
    <header>
        <h4>{{username}}</h4>
        <div>
            <ul>
                <li>App Settings</li>
                <li>User Preferences</li>
            </ul>
        </div>
    </header>
</div>
    
</div>
<div id="map" ng:controller="GoogleMaps"></div>