JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css">
<div id="myApp" ng-app="app">
  <div id="resume" ng-controller="ResumeController">
    <header id="header">
      <div class="container">
        <div class="row">
          <div class="col-sm-9 col-sm-push-3">
            <h1>
            {{resume.basics.name}}
            </h1>
            <h2>
            {{resume.basics.label}}
            </h2>
          </div>
        </div>
      </div>
    </header>
    <div id="content" class="container">
<section id="contact" class="row">
<aside class="col-sm-3">
<h3>Contact</h3>
</aside>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-6">
<strong>Email</strong>
<div class="email">{{resume.basics.email}}</div>
</div>
<div class="col-sm-6">
<strong>Phone</strong>
<div class="phone">{{resume.basics.phone}}</div>
</div>
<div class="col-sm-6">
<strong>Website</strong>
<div class="website">
<a href="https://richardhendricks.com">{{resume.basics.website}}</a>
</div>
</div>
</div>
</div>
</section>
  </div>
</div>

CSS

@import url(
	https://fonts.googleapis.com/css?family=Lato:400,700
);
body {
	background: #fff;
	font-family: Lato, sans-serif;
	margin: 0 0 80px;
}
a {
	color: #2ecc71;
}
a:focus,
a:hover {
	color: #f1c40f;
	text-decoration: none;
}
p {
	line-height: 1.5;
	margin: 0;
}
p + p {
	margin-top: 10px;
}
h1,
h2,
h3,
h4 {
	margin-top: 0
}
section {
	margin-top: 30px;
}
li {
	line-height: 1.8;
	list-style: none;
}
li:before {
	content: "\f052";
	float: left;
	font: 13px Octicons;
	margin-top: 6px;
	margin-left: -20px;
	opacity: .1;
	position: absolute;
}
blockquote {
	border-left: 5px solid #e7e9ec;
	font-size: 14px;
}
em {
	color: #95a5a6;
	font-weight: normal;
	font-style: normal;
}
h4 span:first-child {
	color: #000;
	font-weight: bold;
}
.container {
	max-width: 750px;
	padding: 0 30px;
}
.col-sm-6 {
	margin-bottom: 10px;
}
.col-sm-12 h4 {
	margin-top: 12px; 
}
.col-sm-12 + .col-sm-12 {
	margin-top: 30px;
}
#header {
	background: #f4f6f6;
	padding: 50px 0;
	margin-bottom: 30px;
}
#header h2 {
	color: #95a5a6;
	font-size: 24px;
}
#content h3 {
	color: #f1c40f;
	font-size: 26px;
	margin-top: -4px;
}
#content aside {
	text-align: right;
	padding-right: 30px;
}
#profiles .network {
	text-transform: capitalize;
}
#work .position,
#volunteer .position {
	font-weight: bold;
	margin-bottom: 8px;
}
#education .area {
	font-weight: bold;
}
#education .area:before {
	content: "\f0d7";
	font: 16px Octicons;
	margin-right: 6px;
}
#education .studyType {
	margin-left: 25px;
}
#awards .summary,
#publications .summary {
	margin-top: 8px;
}
#publications .website a:before {
	content: attr(href);
}

@media (min-width: 480px) {
	.strike-through {
		border-top: 1px solid #f4f6f6;
		height: 20px;
		margin-top: 12px;
		margin-bottom: -2px;
		position: relative;
	}
	.strike-through span,
	.strike-through a {
		background: #fff;
		position: absolute;
	}
	.strike-through span:first-child {
		padding-right: 20px;
		margin-top: -12px;
	}
	.strike-through span + span {
		font-size:...

JavaScript

var app = angular.module('app', []);

app.controller('ResumeController', ['$scope', function($scope) {
	$scope.resume = {
  "basics": {
    "name": "Richard Hendriks",
    "label": "Programmer",
    "picture": "",
    "email": "[email protected]",
    "phone": "(912) 555-4321",
    "website": "https://richardhendricks.com",
    "summary": "Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!",
    "location": {
      "address": "2712 Broadway St",
      "postalCode": "CA 94115",
      "city": "San Francisco",
      "countryCode": "US",
      "region": "California"
    },
    "profiles": [
      {
        "network": "Twitter",
        "username": "neutralthoughts",
        "url": ""
      },
      {
        "network": "SoundCloud",
        "username": "dandymusicnl",
        "url": "https://soundcloud.com/dandymusicnl"
      }
    ]
  },
  "work": [
    {
      "company": "Pied Piper",
      "position": "CEO/President",
      "website": "https://piedpiper.com",
      "startDate": "2013-12-01",
      "endDate": "2014-12-01",
      "summary": "Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.",
      "highlights": [
        "Build an algorithm for artist to detect if their music was violating copy right infringement laws",
        "Successfully won Techcrunch Disrupt",
        "Optimized an algorithm that...