JSFiddle - React, Tailwind, and code Playground

.push(article)

by Jennifer Perrin

HTML

<header>
  <h1 id="title">.push(article)</h1>
  <h4 id="subtitle">What percentage of tweets are someone pushing?</h4>
</header>
<div class="content">
  <p>Tweets from <i>start</i> to <i>end:</i></p>
  <ul>
    <li>Number of Tweets: <i>number</i></li>
    <li>Number of Tweets containing a link: <i>number</i></li>
    <li>Percentage of Tweets containing a link: <i>percentage</i></li>
  </ul>
</div>
<footer><h3 id="back-link"><a href="#">< Back (To The Future)</a></h3></footer>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
@import url(http://fonts.googleapis.com/css?family=Raleway);

* {
  margin: 0;
  padding 0;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  background-color: #193a4d;
  color: #fff;
  font-family: 'Raleway', sans-serif;
}

header {
  background-color: #2a2a2a;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: right;
  font-family: 'Droid Serif', serif;
}

footer {
  background-color: #2a2a2a;
  width: 100%;
  position: fixed;
  bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: 'Droid Serif', serif;
}

.content {
  width: 60%;
  background-color: #255773;
  position: relative;
  left: 16%;
  top: 70px;
  border-radius: 10px;
  padding: 50px;
  font-size: 20px;
}

.bottom-float {
  position: relative;
  top: 125px;
  font-size: 14px;
}

#title {
  margin-right: 10px;
}

#back-link {
  margin-left: 10px;
}

#subtitle {
  margin-right: 10px;
}

a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #888;
}

i {
  font-style: normal;
  color: pink;
}