JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="header">
<a class="logo" href="#"><span></span></a>
</div>
<div class="content">
<h1><span></span></h1>
<div class="right_side">
<p> <a href=""></a><br/></p>
<ul class="s_buttons">
<li class="button1"><a href="></a></li>
<li class="button2"><a href="></a></li>
<li class="button3"><a href="#"></a></li>
</ul>
CSS
.container{
width: 940px;
margin: 0 auto;
}
.header{
width: 940px;
float: left;
}
.content{
width: 940px;
float: left;
padding-bottom: 70px;
background: url(../images/dr.png) center bottom no-repeat;
margin-bottom: 25px;
}
.right_side p{
font-size: 30px;
letter-spacing: -1px;
color: #fff;
font-weight: 200;
line-height: 50px;
}
ul.s_buttons{
width: 376px;
height: 27px;
margin-top: 15px;
}
ul.s_buttons li{
float: left;
background: url(../images/s_icons.png) 0 0 no-repeat;
height: 27px;
}
ul.s_buttons li a{
display: block;
height: 27px;
ul.s_buttons li.face{
margin-right: 36px;
width: 100px;
height: 27px;
background-position: 0 0;
}