JSFiddle - React, Tailwind, and code Playground

by Esther Mun

HTML

<div id="nav-wrapper">
    <div id="nav">
        <ul>
            <li><a href="/creative/" id="nav-creative" title="view our web design and development work"><strong>creative</strong>design</a>

            </li>
            <li><a href="/clever/" id="nav-clever" title="view our application development work"><strong>clever</strong>development</a>

            </li>
            <li><a href="/fun/" id="nav-fun" title="view and play the games we designed and developed"><strong>fun</strong>games</a>

            </li>
            <li><a href="/about/" id="nav-about" title="learn more about us"><strong>about</strong>who we are</a>

            </li>
            <!-- <li><a href="/blog/" id="nav-blog" title="read our wicked blog"><strong>blog</strong>news</a></li> -->
            <li><a href="/contact/" id="nav-contact" title="drop us a line, we'd love to hear from you"><strong>talk to us</strong>contact</a>

            </li>
        </ul>
        <br class="clear" />
    </div>
</div>
<div id="wrapper">
    <div id="hp-intro">
        	<h1>Being Wicked: creative. clever. fun. A studio with a healthy dose of hedonism.</h1>

        <p>We love books, whether they be science or science-fiction, memoirs or mysteries. There's something magical about sitting down with a fresh book, so full of potential and wonder. And there's equal magic in the sorrow of saying goodbye to characters you've grown to know and love as you turn that last page.</p>
        <p>Words are powerful.</p>
        <p>Now you need those words to be read and shared. We're good at that. In fact, it's what we're best at: <strong>we're a design and development studio that specializes in the publishing industry</strong>. So, if you're a writer or a publisher that we're not already working with, <a href="/rfq/">you should hire us</a>. We're wicked good.</p>
    </div>
    <div id="hp-work">
        <div id="hp-work-creative">
            	<h2>being wicked creative</h2>

            	<h3><strong>Web Design...

JavaScript

// http://beingwicked.com/
var myObject = {};
myObject.nav = document.querySelector("#nav").textContent;
myObject.hpIntro = document.getElementById("hp-intro").textContent;
myObject.hpWork = document.querySelector("#hp-work").textContent;
myObject.featured = document.querySelector("#hp-featured").textContent;
myObject.hpClients = document.getElementById("hp-clients");
var footerBottom = document.getElementById("footer").firstElementChild;
myObject.footer = [footerBottom.textContent, footerBottom.nextElementSibling.textContent, footerBottom.nextElementSibling.nextElementSibling.textContent];
myObject.links = document.querySelectorAll("a");
/*
    for (var ele = document.querySelector("#footer").firstElementChild; ele; ele = ele.nextElementSibling) {
        ele.textContent;
    }

*/