JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrap">
    <div class="container">
      <div class="row">
        <header class="site-header col-xs-12 col-sm-10 col-sm-offset-1">
            <a class="logo" title="Cards Against Humanity's Ten Days or Whatever of Kwanzaa" href="../"><img width="356" height="313" src="//www.holidaybullshit.com/images/puzzle/logo-eb2c5c80.png" /></a>

          <h1>2014 Puzzle</h1>
        </header>
      </div>
      
        <form name="formMulti">
            <ul>
                <li>
                    &nbsp;&nbsp;<input type="text" />
                </li>
                <li>
                    <span class="operator">+ </span><input type="text" />
                </li>
                <li>
                    <span class="operator">- </span><input type="text" />
                </li>
                <li class="q4">
                    <input type="text" />
                </li>
            </ul>
        </form>
    </div>
  </div>

  <footer class="site-footer">
    <div class="container">
      <div class="row content">
        <div class="col-xs-12">
          <ul class="list-inline">
            <li><a href="https://www.holidaybullshit.com">holidaybullshit.com</a></li>
            <li><a href="http://www.cardsagainsthumanity.com">cardsagainsthumanity.com</a></li>
            <li><a href="http://www.reddit.com/r/holidaybullshit">/r/holidaybullshit</a></li>
            <li><a href="http://cah.tumblr.com/">cah.tumblr.com</a></li>
          </ul>
        </div>

        <div class="col-xs-12 col-sm-10 col-sm-offset-1">
          <p class="disclaimer">
            <strong>Disclaimer:</strong><br>
            To solve this puzzle, you wON’t need anyone’s personal information. Do not stalk ANYONE, hack our website, or interfere with other solvers or you’ll be disqualified.
          </p>
        </div>
      </div>
    </div>
  </footer>

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,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: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    line-height: 1;
}

ol,ul {
    list-style: none;
}

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

caption,th,td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

q,blockquote {
    quotes: none;
}

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

a img {
    border: none;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block;
}

[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak {
    display: none !important;
}

html {
    box-sizing: border-box;
}

*,*:before,*:after {
    box-sizing: inherit;
}

body {
    color: white;
    background: black;
    font-family: "Courier New", Courier, monospace;
    text-align: center;
    letter-spacing: .1em;
    -webkit-font-smoothing: antialiased;
}

h1,h2 {
    font-size: 36px;
    line-height: 36px;
    text-transform: uppercase;
}

a {
    color: white;
    border-bottom: 1px solid white;
    text-decoration: none;
}

a:hover {
    color: #999;
    border-color: #999;
}

p {
    margin-bottom: 0;
}

img {
    max-width: 100%;
}

strong {
    font-weight: bold;
}

.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}

.list-inline>li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

form {
    min-height: 560px;
    padding: 60px;
    border: 2px solid...