JSFiddle - React, Tailwind, and code Playground

by victorhooi

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<script src="http://fonts.googleapis.com/css?family=Arimo:400,700|Roboto+Slab:700"></script>
<nav id="nav" role="navigation">
<!--     <a href="#nav" title="Show navigation">Show navigation</a>
    <a href="#" title="Hide navigation">Hide navigation</a>
 -->    <ul>
        <li>
            <ul>                
                <li><a href="#biography"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Bio</a>
                </li>
                <li><a href="#story"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Story</a>
                </li>
                <li><a href="#proposal"><img src="http://victorandalpha.com/images/glyphicons_271_ring.png"/>Proposal</a>
                </li>
                <li><a href="#gallery"><img src="http://victorandalpha.com/images/glyphicons_138_picture.png"/>Gallery</a>
                </li>
                <li><a href="#rsvp"><img src=".images/glyphicons_120_message_full.png"/>RSVP</a>
                </li>
                <li><a href="#thedate"><img src="http://victorandalpha.com/images/glyphicons_045_calendar.png"/>The Date</a>
                </li>
                <li><a href="#party"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Party</a>
                </li>
                <li><a href="#thankyou"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Thank You</a>
                </li>
                <li><a href="/"><img src="http://victorandalpha.com/images/glyphicons_158_show_lines.png"/>Menu</a></li>
            </ul>
        </li>
    </ul>
</nav>

    <section id="annoucement" class="backgroundphotos">
        <div...

CSS

/* http://css-tricks.com/perfect-full-page-background-image/ */
 /*       html {
            background: url(http://victorandalpha.com/images/6133364748_89f2365922_o.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }*/

        body {
            /*padding-top: 20px;*/
            font-size: 16px;
            font-family: "Open Sans",serif;
            background: transparent;
        }

        /*h1 {
            font-family: "Abel", Arial, sans-serif;
            font-weight: 400;
            font-size: 40px;
        }*/

        /* Override B3 .panel adding a subtly transparent background */
        .panel {
            background-color: rgba(255, 255, 255, 0.90);
        }

        .backgroundphotos {
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-attachment: scroll; /* Why does this not carry over? */
            min-height: 800px;

        }

        .contentbox {
            /*position: absolute;*/
            bottom: -22em;
        }

        /*This is very hacky - why aren't all the contentboxes the same?*/
        #thedate div.contentbox {
            bottom: -30em;
        }

        #annoucement {
            background: url(http://victorandalpha.com/images/01.jpg) no-repeat center center fixed;
            background-attachment: scroll; /* This should be the default - not sure why it isn't */
        }
        
        #proclaim {
            position: absolute;
            bottom: -0.625em;
            /*bottom: 200px;*/
        }

        #wearegettingmarried {
            font-family: 'Roboto Slab', serif;
            font-size: 4em;
            line-height: 0.875;
            text-align: center;
            color: white;
            text-transform: uppercase;
...

JavaScript

$('section').css('height', innerHeight);