JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div id="page">
    <div id="header">
        
        <div id="nav">
            <ul>
                <li data-id="arryn">Arryn</li>
                <li data-id="baratheon">Baratheon</li>
                <li data-id="bolton">Bolton</li>
                <li data-id="greyjoy">Greyjoy</li>
                <li data-id="lannister">Lannister</li>
                <li data-id="martell">Martell</li>
                <li data-id="stark">Stark</li>
                <li data-id="targaryen">Targaryen</li>
                <li data-id="tyrell">Tyrell</li>
            </ul>
        </div>
        
        <div id="banner">
            <div id="sigil"></div>
        </div>
        
        <div id="title">
            <div id="house"></div>
            <div id="words"></div>
        </div>
        
    </div>
    <div id="content">
        <div id="characters"></div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900);
@import url(http://fonts.googleapis.com/css?family=Cinzel:400,700,900);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);

* {
    box-sizing: border-box;
}

body {
    min-width: 900px;
    margin: 0;
    background: #111;
    color: #fafafa;
    font-family: 'Source Sans Pro', sans-serif;
}

#header {
    position: relative;
    text-align: center;
}
#header:before {
    content: '';
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    background: url('https://www.moxieinteractive.com/images/our-work/cartoon_network/smoke.png') bottom;
    background-size: 150% auto;
    opacity: .3;
}

#banner {
    position: relative;
    height: 150px;
    background: black;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

#nav {
    position: relative;
    font-family: 'Cinzel', serif;
}
#nav ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav li {
    display: inline-block;
    margin: 0 10px;
    line-height: 40px;
    text-shadow: 0 2px 2px rgba(0,0,0,.3);
    cursor: pointer;
}
#nav li:hover {
    text-decoration: underline;
}

#sigil {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 180px;
    height: 180px;
    margin: -120px 0 0 -90px;
    border-radius: 50%;
    border: 6px double transparent;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

#title {
    margin-top: 70px;
}
#title div {
    line-height: 40px;
    text-align: center;
    font-size: 40px;
    font-variant: small-caps;
    text-shadow: 0 3px 3px rgba(0,0,0,.4);
}

#house {
    font-family: 'Cinzel', serif;
}

#words {
    font-family: 'Playfair Display', serif;
    font-size: 24px !important;
    font-style: italic;
}

#content {
    width: 900px;
    margin: 0 auto;
    padding: 40px;
}

#content hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px dotted...

JavaScript

var houses = [];

houses.arryn = {
    motto: 'As High as Honor',
    characters: [ 
        {
            name: 'Petyr Baelish',
            img: 'http://images4.fanpop.com/image/photos/23300000/Petyr-Baelish-lord-petyr-baelish-23395522-1920-1080.jpg',
            descr: "Petyr Baelish, popularly called Littlefinger, was the Master of Coin on the Small Council. He is a skilled manipulator and uses his ownership of brothels in King's Landing to both accrue intelligence on political rivals and acquire vast wealth. Baelish's spy network is eclipsed only by that of Varys. He betrayed Eddard Stark to side with House Lannister and King Joffrey Baratheon following the death of King Robert Baratheon, becoming one of the instigators of the War of the Five Kings. Following the events of the Battle of Blackwater, King Joffrey named Littlefinger the Lord of Harrenhal. He eventually marries Lysa Arryn and proceeds to murder her shortly afterwards, becoming Lord Protector of the Vale until Lord Robin Arryn comes of age and one of the most powerful men in all of Westeros.",
            actor: 'Aidan Gillen'
        }, {
            name: 'Lysa Arryn',
            img: 'http://watchersonthewall.com/wp-content/uploads/2015/04/Game-of-Thrones-game-of-thrones-32359202-702-468.jpg',
            descr: "Lysa Arryn, née Tully, was the Lady Regent of the Vale, ruling on behalf of her young son Robin Arryn. She doted on her son and pursued a policy of isolationism since the death of her husband Jon Arryn. She presided over the trial of Tyrion Lannister for the murder of Jon Arryn and the attempted murder of Bran Stark. He proves his innocence in a trial by combat. Lysa refused to commit her forces to aid her sister Catelyn Stark in the War of the Five Kings.",
            actor: 'Kate Dickie',
            dead: true
        }, {
            name: 'Jon Arryn',
            img:...