JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
      <header>
        <img alt="Mika Portrait" class="" src="https://s3-us-west-2.amazonaws.com/mikaimages/mika.gif" />
        <ul>
          <li>
            Mika Kalathil
          </li>
          <li>
            <a class="current" href="/">Home</a>
          </li>
          <li>
            <a href="/projects">Projects</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
        </ul>
      </header>
      <section class='body-section' id='home'>
        <div id='personal-title'>
          <h1>Web Developer/<wbr></wbr>Software Developer/<wbr></wbr>Freelancer</h1>
          <p>Website Under Development</p>
        </div>
      </section>
      <footer>
        <ul>
          <li>
            &copy; Mika Kalathil 2014
            <a href="//plus.google.com/u/0/101662310373136763168?prsrc=3" id="google-img" rel="publisher" target="_top"><img alt="Google+" height="16" src="//ssl.gstatic.com/images/icons/gplus-16.png" width="16" /></a>
          </li>
          <li>
            <a class="" href="/contact">Contact</a>
          </li>
          <li>
            <a href="/tos">Terms of Service</a>
          </li>
          <li>
            <a href="/privacy">Privacy Policy</a>
          </li>
        </ul>
      </footer>
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        
        ga('create', 'UA-48617207-1', 'mikakalathil.ca');
        ga('send', 'pageview');
      </script>
    </div>

CSS

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *

 */
@import url(http://fonts.googleapis.com/css?family=Della+Respira);
@import url(http://fonts.googleapis.com/css?family=Cabin);
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body {
  margin: 0;
  padding: 0;
  border: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* Mobile Defaults
===================== */
html,
body {
  height: 100%;
  background-color: black;
  line-height: 1.5em; }

html,
html...