JSFiddle - React, Tailwind, and code Playground

by lcazarre

HTML

<body>

<nav id="top-menu">
    <ul>
        <li> <a href="index.html">Home</a> </li>
        <li> <a href="charting.html">Charting</a> </li>
        <li> <a href="map.html">Map</a> </li>
        <li> <a href="financials.html">Financials</a> </li>
        <li> <a href="forum.html">Forum</a> </li>
        <li> <a href="about.html">About</a> </li>
    </ul>
</nav>

<div id="maindiv">
<header>
    <img class="img-right" src="images/Inkscape_stocktails_240_240.png"
        alt="Stocktail" width="240" height="240" />
    <hgroup>
        <h1> Welcome to Stocktails </h1>
    </hgroup>
    <p> The perfect blend for your investment portfolio </p>
</header>

<article class="story">
    <h1> Start investing today with Stocktails </h1>
    <p>
        Stocktails is a collection of tools and resources to facilitate the investing process, from data retrieval, stock analysis and valuation, up to the construction and monitoring of your portfolio.
	</p>
</article>

<article class="story">
    <h1> The renaissance of value investing </h1>
    <p>
        As the world economy slowly emerges and recovers from the <a href="http://en.wikipedia.org/wiki/Great_Recession">Great Recession</a>,
 		appetite for stocks is still on the wane. Stung by three successive market crashes in recent memory (<a href="http://en.wikipedia.org/wiki/Black_Monday_(1987)">1987</a>, <a href="http://en.wikipedia.org/wiki/Dot-com_bubble">2000</a>, <a href="http://en.wikipedia.org/wiki/Financial_crisis_of_2007–08">2008</a>),
		retail investors turned their attention away from common shares and towards presumably safer assets, such as property.
		In parallel, institutional investors, from insurance companies to endowments, have greatly diversified their holdings towards private equity, hedge funds and hard assets.
	</p>
	<p>
		<em>Stocks are down, but not out</em>. It is our belief that they may even be on the verge of a renaissance. As most alternative asset classes,
		notably sovereign bonds and property,...

CSS

body {
    background-color: #fffbef;
}

.story p {
    line-height: 1.2;
	text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
    color: #093844;
    margin: .25ex 12pt;
}

.clear {
    margin: 0;
    padding: 0;
    clear: both;
}

img.img-right {
    display: block;
    float: right;
    border: none;
    padding: 2px;
    margin: 3px 6pt 3px 6px;
}

/* navigation menu */

nav#top-menu {
    width: 100%;
    height: 50px;
    //background-color: #fff2c1;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0;
    padding: 0;
}

#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: sans-serif;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    color: #52736b;
    border-bottom: #fffbef solid 2px;
}

#top-menu ul li a:hover { border-bottom: #52736b solid 2px; }

/* header */

header h1 { margin-top: 0; }

header p {
    font-family: sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 85%;
    margin: .25ex 12pt;
    color: #093844;
}

/* maindiv */

#maindiv {
    width: 1250px;
    margin: 0 auto;
	padding: 10px;
    background-color: #eec;
}

/* article */

article {
    width: 950px;
    float: left;
}

article h1 {
    font-size: 110%;
    margin-top: 12pt;
    padding-top: 3pt;
    border-top: 4px solid #52736b;
}

/* aside */

aside.about {
    float: right;
    width: 238px;
    background-color: #b7c4b1;
    margin: 3pt 6pt 3pt 6pt;
}

aside h1 { font-size: 110%; }
aside h2 { font-size: 90%; }
aside p {
    margin: 0 12pt;
    font-family: sans-serif;
    font-style: italic;
    font-size: 80%;
}

aside section h1 {
    padding-top: 3pt;
    border-top: 4px solid #4f5856;
}

aside header p {
    font-size: 85%;
}

aside section {
    padding: 5px 0 5px 0;
}

/*...