JSFiddle - React, Tailwind, and code Playground
HTML
<div id="rest_contents" data-ng-app="">
<
<div id="updates" data-ng-init="titles=['Campaign','House Showcases']">
<h1 id="vertical"><img src="mark.png" />Recent Updates</h1>
<div id="{{x}}" class="repeat" data-ng-repeat="x in titles">
<div id="tofloat">
<div id="headline">{{x}}</div> <BR />
<div id="time_stamp">2014.02.14</div>
</div>
<p>
Loreum ipsum doloar sit amet, consectetur adipiscing
elit. Etiam in sagittis nisl. Donec et convallis eros, quis volutpat.
Loreum ipsum doloar sit amet, consectetur adipiscing
elit. Etiam in sagittis nisl. Donec et convallis eros, quis volutpat.
</p>
</div>
</div>
<div data-ng-init="sections=[{title: 'Campaign', pictorial:'campaign.png'},
{title: 'TV Ads', pictorial='tv_adds.png'} , {title:'Video Archive',pictorial: 'video_archive.png'},
{title: 'House Showcases', pictorial: 'house_showcases.png'}]" >
<div id="section" >
<img src="campaign.png" align="top" /><span id="title">{{x.title}}</span><BR />
<p class="inline blue"> </p> <p class="inline blue"></p> <p class="inline blue"></p> <BR />
<p class="inline white"> Lorem ipsum dolor sit amet consectetur posuere </p>
<p class="inline white"> Lorem ipsum dolor sit amet consectetur posuere </p>
<p class="inline white"> Lorem ipsum dolor sit amet consectetur posuere</p>
</div>
</div>
</div>
CSS
td, table {
background-color: white;
}
#right_next_to, #rounded , #title{
font-size: 24px;
}
td, #description , #video, #rounded, .white {
text-align: center
}
#header, #headline {
background-color: #F56708;
}
#title, .white {
color : #F56708;
}
#tofloat{
float: left;
}
#updates, #video {
background-color: white;
border: 2px solid;
border-color: #CFD9DB;
}
body {
padding: 0;
margin: 0;
background-color: #F7FAFA;
}
#header {
height: 3%;
padding-left: 2%;
}
td {
width: 10%;
}
#right_next_to {
color: #A7A7A7;
text-align: left;
}
td:not(#no_border) {
border-right-style: dotted;
border-right-width: 2px;
border-right-color: #D3DEDE;
}
#rest_contents {
margin-top: 2%;
margin-left: 7%;
width:80%;
}
a {
color:#F56708;
}
#picture_intro_background{
background-color: #ED6103;
height: 181px;
padding-top: 1%;
}
#description {
color: white;
width: 45%;
margin-left: 22%;
font-size: 24px;
transform: translate(70px, 0px);
}
#inspector {
transform: translate(118%, -35%);
}
#city {
transform: translate(40%, -28%);
}
#video {
margin-top: 100px;
}
#updates{
margin-top: 50px;
width:69%;
height: 250px;
}
h1 {
font-size: 20px;
background-color: #F8F8F8;
text-align: left;
}
.vertical {
vertical-align: top;
}
#rounded {
color: #B67F30;
border: 2px solid;
border-radius: 25px;
padding: 10px 15px;
width: 34%;
margin-left: 340px;
}
#left_arrow {
transform: translate(-160px, -140px);
}
#right_arrow {
float: right;
transform: translate(-5px, 150px);
}
#headline {
color: white;
padding: 5px;
margin-left: 20px;
margin-right: 10px;
width: 67px;
text-align: center;
}
#time_stamp {
color: #B67F30;
margin-left: 20px;
margin-top: -10px;
}
#Campaign {
border-bottom: thin dotted #CFD9DB;
margin-bottom: 20px;
}
#section {
transform: translate(0px, 50px);
}
.inline {
background-color: #89BFC2;
margin-right: 45px;
display: inline-block;
}
.blue {
padding: 10px;
width: 196px;
height: 120px;
}
.white {
width: 192px;
height:...