JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" ng-app ng-init="tab=1">
    <p>Estava explicando sobre diretivas e fiz esse exemplo de abas. <a href="http://tableless.com.br/fazendo-uma-todo-list-com-angularjs">Leia o artigo aqui</a>.</p>
	
<ul class="tabs-nav">
  <li><a ng-click="tab=1" ng-class="{'active' : tab==1}">Aba 1</a></li>
  <li><a ng-click="tab=2" ng-class="{'active' : tab==2}">Aba 2</a></li>
  <li><a ng-click="tab=3" ng-class="{'active' : tab==3}">Aba 2</a></li>
</ul>

	<div class="tabs-container">
		<div class="tab-content ng-hide" ng-show="tab == 1">
			<h3>Primeira aba</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolores laborum doloribus iusto quaerat dicta nemo aperiam. Voluptas repudiandae, enim, illum perspiciatis harum officia inventore iusto fugit, repellat asperiores maiores.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolores laborum doloribus iusto quaerat dicta nemo aperiam. Voluptas repudiandae, enim, illum perspiciatis harum officia inventore iusto fugit, repellat asperiores maiores.</p>
		</div>

		<div class="tab-content ng-hide" ng-show="tab == 2">
			<h3>Segunda aba</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet impedit dolorem quae, quo nobis omnis? Officia quibusdam quaerat assumenda ipsam, et quos laborum quae ex iste numquam laboriosam obcaecati iure.</p>
		</div>

		<div class="tab-content ng-hide" ng-show="tab == 3">
			<h3>Terceira aba</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis totam quibusdam maxime quidem id ducimus, esse aliquid in facilis quisquam ut possimus enim voluptatum quas accusamus, necessitatibus provident. Doloremque, nulla.</p>
		</div>

	</div>


</div>

CSS

* {margin: 0; padding: 0; box-sizing: border-box;}

	body {
	    background-color: #fff;
		font: 13px Arial, Tahoma, sans-serif;
	}
	.container {
		padding: 50px;
		max-width: 900px;
		margin: auto;
	}

	.tabs-nav {padding: 20px 0 0; list-style: none;}
	.tabs-nav li {display: inline;}
	.tabs-nav a {
		display:inline-block;
		border: 1px solid #ddd;
		border-bottom: none;
		padding: 15px;
		cursor: pointer;
		border-radius: 5px 5px 0 0;
		font-size: 14px;
		color: #fff;
		background: rgba(20, 144, 64, 0.7);
	}
	
	.tabs-nav .active {
		background: #fff;
		color: rgba(20, 144, 64, 0.7);
		border-bottom: 1px solid #fff;
		margin-bottom: -1px;
	}

	.tab-content {
		border: 1px solid #ddd;
		padding: 20px;
	}

	p {
		margin-bottom: 15px;
	}