JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<body>
    <div id="container">
        <header><a href="/"><img class="head" src="/static/images/header.png" /></a></header>
        <main><nav>
    <a href="/new" class="button">New thread</a>
    <input type="text" id="tagsearch" placeholder="Filter by tag" />
</nav>
<hr />
<article class="hidden2">
    Recently updated threads, ordered by latest reply
</article>
<article class="thread-item">
    <h3 class="thread-name"><a href="/thread/Pg" class="noborder">Qualche idea?</a></h3>
    <div>Last reply: <a href="/thread/Pg#p24"><span class="date">1416395222</span></a></div>
</article>
<article class="thread-item">
    <h3 class="thread-name"><a href="/thread/EA" class="noborder">Cose</a></h3>
    <div>Last reply: <a href="/thread/EA#p22"><span class="date">1416394988</span></a></div>
</article>
<article class="thread-item">
    <h3 class="thread-name"><a href="/thread/Rg" class="noborder">custom markup</a></h3>
    <div>Last reply: <a href="/thread/Rg#p9"><span class="date">1416316268</span></a></div>
</article>
<article class="thread-item">
    <h3 class="thread-name"><a href="/thread/BA" class="noborder">Ohaio!</a></h3>
    <div>Last reply: <a href="/thread/BA#p36"><span class="date">1416315717</span></a></div>
</article>
<article class="thread-item">
    <h3 class="thread-name"><a href="/thread/Ig" class="noborder">Anteprima della S5</a></h3>
    <div>Last reply: <a href="/thread/Ig#p11"><span class="date">1416304042</span></a></div>
</article>

<hr />
<article class="hidden2">
    Most popular tags, ordered by popularity
</article>
<article class="tag-item">
    <h3 class="tag-name"><a href="/tag/maud" class="noborder">maud</a></h3>
    <div>Last updated thread: <a href="/thread/BA#p34" class="thread-title">Ohaio!</a> (<span class="date">1416315717</span>)</div>
</article>
<article class="tag-item">
    <h3 class="tag-name"><a href="/tag/dev" class="noborder">dev</a></h3>
    <div>Last updated thread: <a href="/thread/Dg#p50"...

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:200,400,600);
/* General Template */
/* line 6, ../src/scss/screen.scss */
body {
  background: url(http://crunchy.rocks/static/images/bg.png) #333333 fixed;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
  color: #fff;
  margin: 0;
  padding: 0;
}

/* line 12, ../src/scss/screen.scss */
header, footer, h1, h2, h3, h4 {
  font-family: "Raleway", sans-serif;
}

/* line 14, ../src/scss/screen.scss */
#container {
  text-align: left;
  width: 98%;
  max-width: 650px;
  margin: 0 auto;
}

/* line 21, ../src/scss/screen.scss */
nav, section, article {
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
  margin: 2px 0;
}

/* line 26, ../src/scss/screen.scss */
header {
  background: #000;
  font-size: 2em;
  height: 150px;
  background-color: #000, #000;
  background-image: url(/static/images/headerbg.png), url(/static/images/maud.gif);
  background-repeat: no-repeat;
  background-position: left, right;
}

/* line 36, ../src/scss/screen.scss */
img.head {
  width: 100%;
  max-width: 410px;
  margin-top: 10px;
}

/* line 38, ../src/scss/screen.scss */
header a, header a:visited {
  color: #fff;
  border: 0;
  font-weight: 200;
}

/* line 43, ../src/scss/screen.scss */
footer {
  margin: 10px;
  text-align: center;
  font-size: 0.85rem;
}

/* line 49, ../src/scss/screen.scss */
hr {
  background: transparent;
  padding: 3px;
  margin: 2px 0;
  border: 0;
}

/* Buttons and links */
/* line 56, ../src/scss/screen.scss */
input[type="submit"], a.button, a.button:visited {
  font-family: "Source Sans Pro", sans-serif;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid #ccc;
  color: #fff;
  padding: 3px 5px;
  margin: 0;
  margin-right: 2px;
  display: inline-block;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: 300;
  -webkit-transition-property: all;
 ...