JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<nav>
    <ul>
        <li><a href="#" data-page="home">Home</a></li>
        <li><a href="#" data-page="downloads">Downloads</a></li>
        <li><a href="#" data-page="tutorials">Tutorials</a></li>
    </ul>
</nav>
<section id="main"></section>

CSS

body {
	margin:0;
	font-family: "Trebuchet MS", sans-serif;
	font-size:0.8em;
}

nav {
	background:#e4e7ec;
	padding:10px;
}

nav ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

nav ul li {
	display:inline;
}

nav ul li a {
	padding:10px;
	text-decoration:none;
	color:#586374;
}

nav ul li a:hover {
	color:#000;
}

section#main {
	padding:20px;
}

JavaScript

var app = {
    nav: $('nav ul li a'),
    content: $('section#main')
};

app.putContent = function(content) {
    this.content.html(content);
}

app.loadPage = function(page) {
    console.log(page);
}

app.init = function() {
    app.nav.on('click', function() {
        var page = $(this).data('page');
        app.loadPage(page);
    });
}();