JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div id="page-container">
    <div id="header">
      <a href="index.html"><img src="images/logotype-max.png" /></a>

      <div id="subheader">
        <h2>The leading name in digitisation</h2>
      </div>
    </div>

    <div id="nav">
      <b><a href="about.html">About</a></b><br />
      <a href="services.html">Services</a><br />
      <a href="clients.html">Clients</a><br />
      <a href="cases.html">Case studies</a><br />
      <a href="contact.html">Contact</a><br />
      <br />
      <a href="blog.html">David's blog</a><br />
      <br />
      <a href="http://www.twitter.com" target="_blank">Twitter</a><br />
      <a href="http://www.facebook.com" target="_blank">Facebook</a><br />
      <a href="http://www.youtube.com" target="_blank">YouTube</a><br />
    </div>

    <div id="content_l">
      <p>Max Communications is the company of choice for the digitisation of images,
      audio and video. We have established ourselves as the leading provider of digital
      solutions to large institutions, blue-chip companies, galleries, museums and media
      organisations. Quality products and professional service have enabled us to attract
      and maintain a formidable <a href="clients">client list</a>.</p>

      <p>Specialising in high quality, high volume digitisation <a href=
      "services">services</a>, we place an overriding emphasis on developing friendly and
      long-term relationships with all our clients.</p>

      <p>Our association over many years with both the heritage sector and large media
      organisations has given us a sound understanding of digital production workflow and
      quality management.</p>

      <p>This puts us in a unique position to provide advice to clients on utilisation of
      best practices and adherence to the latest archive and industry standards. As a
      result, our clients are able to leverage the greatest possible return from their
      digital assets, in commercial, preservation and accessibility...

CSS

html,body
{
  background:#ff5000;
  font-family:georgia;
  margin:0;
  padding:0;
}

.hidden
{
  display:none;
}

#page-container
{
  width:1000px;
  margin:auto;
  padding:60px;
}

#main-nav
{
  height:50px;
}

#header
{
  clear:both;
  height:100px;
  font-family:Georgia;
  font-size:10px;
  color:#000;
  line-height:12px;
  margin:auto;
}

#subheader
{
  width:400px;
  float:right;
  text-align:right;
  font-size:12px;
  padding:25px 5px;
}

h1
{
  margin:0;
  padding:0;
}

h2
{
  float:right;
  font-weight:400;
  margin:0;
  padding:0;
}

#nav
{
  float:left;
  width:200px;
  font-family:Georgia;
  font-size:15px;
  line-height:1.4em;
  word-spacing:.2em;
}

#content_l
{
  float:left;
  width:400px;
  font-family:Georgia;
  font-size:15px;
  line-height:1.4em;
  word-spacing:.2em;
}

#content_r
{
  float:left;
  width:400px;
  font-family:Georgia;
  font-size:10px;
  line-height:1.4em;
  word-spacing:.2em;
}

#section1
{
  float:left;
  background:none;
  width:650px;
}

#column1
{
  float:left;
  background:none;
  font-size:14px;
  width:350px;
}

#column2
{
  float:right;
  background:none;
  font-size:14px;
  width:300px;
}

#section2
{
  float:right;
  background:none;
  width:350px;
}

#column3
{
  float:left;
  background:none;
  font-size:14px;
  width:250px;
}

#column4
{
  float:right;
  background:none;
  font-size:14px;
  width:100px;
}

#footer
{
  clear:both;
}