JSFiddle - React, Tailwind, and code Playground

by deathhell

HTML

<div ng-app ng-controller="tabController" class="wrapper">
    <ul class="clearfix">
                <li ng-repeat="item in items" ng-class="{active:item.name==page}" ng-click="tabChange(item)">{{item.name}}</li>
            </ul>
            <div id="mainView" ng-switch on="page">
                <div ng-switch-when="Cutman">
                    <a href="http://www.flickr.com/photos/deathhell/6861320435/"><img src="http://farm8.staticflickr.com/7205/6861320435_87faa1786a.jpg" width="500" height="500" alt="Cutman"></a>
                </div>
                <div ng-switch-when="Iceman">
                    <a href="http://www.flickr.com/photos/deathhell/6861320569/" ><img src="http://farm8.staticflickr.com/7038/6861320569_36165752d5.jpg" width="500" height="500" alt="Iceman"></a>
                </div>
                <div ng-switch-when="Fireman">
                    <a href="http://www.flickr.com/photos/deathhell/6861320811/" ><img src="http://farm8.staticflickr.com/7064/6861320811_c9343a33e2.jpg" width="500" height="500" alt="Fireman"></a>
                </div>
            </div>

CSS

body, html, div, ul, li{
            margin:0;
            padding: 0;
            /*background: #ccc;*/
}
.wrapper{
                width:640px;
                margin: 20px auto;
                text-align: center;
                background: #fff;
}
			.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
ul{
                background:#333;
                padding-top:3px;
}
ul li{
                list-style: none;
                float:left;
                padding:5px 20px;
                color:#fff;
                margin:0 2px;
                cursor: default;
}
ul li.active, ul li:hover{
                background: #fff;
                color:#333;
}
#mainView{
                padding:10px;
                border:1px solid #000;
                border-top:none;
                min-height: 200px;
                background: #fff;
}

JavaScript

function tabController($scope){
    $scope.page = 'Cutman';
    $scope.items = [{name:'Cutman'}, {name:'Iceman'}, {name:'Fireman'}];

    $scope.tabChange=function(item){
        $scope.page = item.name;
    }
}