JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.js"></script>
<div class="ui vertically divided grid">
    <div class="two column row">
        <div class="three wide column">
            <nav id="MainNavi">
                <div class="ui vertical pointing menu"> <a ng-class="{active: $state.includes('dashboard')}" class="item" ui-sref="dashboard" title="">Dashboard</a>
 <a ng-class="{active: $state.includes('ingredients')}" class="item" ui-sref="ingredients" title="">Ingredients</a>
 <a ng-class="{active: $state.includes('recipes')}" class="item" ui-sref="recipes" title="">Recipes</a>
 <a ng-class="{active: $state.includes('error')}" class="item" ui-sref="error" title="">Broken</a>

                </div>
            </nav>
        </div>
        <div ui-view class="thirteen wide column">
            
<h1 class="ui header">Ingredients</h1>

            <table class="ui small celled single line table" ng-controller="ingredientsCtrl">
                <thead>
                    <tr>
                        <th>Titel</th>
                        <th>Beschreibung</th>
                        <th>Preis (netto/brutto)</th>
                        <th>Menge</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="ingredient in ingredients">
                        <td>{{ingredient.title}}</td>
                        <td>{{ingredient.description}}</td>
                        <td>{{ingredient.price}} ({{ingredient.price_net}} / {{ingredient.price_gross}})</td>
                        <td>{{ingredient.quantity}} {{ingredient.unit}}</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="4">
                            <div class="ui pagination menu"> <a class="icon item">
            ...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,900italic,900,700,400italic,700italic,300italic,300,100,100italic);