JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
<div ng-controller="tabController" class="wrapper">
            <ul class="clearfix">
                <li ng-repeat="item in items" ng-class="{active:item.name==page,default:item.name!=page}" ng-click="tabChange(item)">{{item.name}}</li>
            </ul>
            <div id="mainView">
                <div ng-show="pageitem">
                    <a ng-href="{{pageitem.href}}" title="{{pageitem.title}}"><img ng-src="{{pageitem.src}}" width="500" height="500" alt="{{pageitem.name}}"></a>
                </div>


            </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',
                        href:"http://www.flickr.com/photos/deathhell/6861320435/",
                        title:"Flickr 上 紅色死神 的 Cutman",
                        src:"http://farm8.staticflickr.com/7205/6861320435_87faa1786a.jpg"
                    }, 
                    {
                        name:'Iceman',
                        href:"http://www.flickr.com/photos/deathhell/6861320569/",
                        title:"Flickr 上 紅色死神 的 Iceman",
                        src:"http://farm8.staticflickr.com/7038/6861320569_36165752d5.jpg"
                    },
                    {
                        name:'Fireman',
                        href:"http://www.flickr.com/photos/deathhell/6861320811/",
                        title:"Flickr 上 紅色死神 的 Fireman",
                        src:"http://farm8.staticflickr.com/7064/6861320811_c9343a33e2.jpg"
                    }];
        $scope.pageitem = $scope.items[0];
        $scope.tabChange=function(item){

            $scope.page = item.name;
            $scope.pageitem = item;
            
        }

    }