JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<ul id='contents'>
    <li>
        <section id='Game'>GAME GOES HERE LULZ</section>
    </li>
    <li>
        <section id='Results'>
            <section id='history'>
                <div id='graph'>PRETEND THIS IS A GRAPH</div>
            </section>
            <section id='last_game'>
                75% correct
                <br/>
                Not bad.
            </section>
        </section>
    </li>
    <li>
        <section id='Help'>
            <h2>How to play:</h2>
            <ul>
                <li>Blah valsfdgk ljg ljksgfjlkdfgl</li>
                <li>Blah valsfdgk dslkfjfs</li>
                <li>Blah valsfdgk ljg ljksasfk klfsjgfjlkdfgl</li>
                <li>Have fun.</li>
            </ul>
        </section>
    </li>
</ul>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

#Results {
    margin: 0;
    padding: 0;
    width: 100%;
}

#history {
    float: left;
    margin: 0px;
    width: 50%;
}

#last_game {
    float: right;
    width: 50%;
}

ul#contents {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;        
}

ul#contents > li {
    height: 20px;
    padding: 0;
    margin: 0;
    padding-left: 10px;
    list-style: none;
    float: left;
}

#contents > li > section {
    position: fixed;
    top: 21px;
    left: 0;
}

CoffeeScript

$ ->
  $('#contents > li > section').before ->
    id = $(@)[0].id
    button = $("<a href='##{id}'>#{id}</a>")
  
  hide_all = ->
    $('#contents > li > section').hide()
    
  $('body').on 'click', '#contents > li > a', ->
    hide_all()
    $('#' + $(@).next()[0].id).show()
  
  hide_all()
  $('#Help').show()