JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header role="banner">
	    <nav role="navigation">
            <ul>
                <li>Menu item 1</li>
                <li>Menu item 2</li>
            </ul>
        </nav>
	</header>
	
	<div class="content">
		<main role="main">
			<article>
			    article 1
			</article>
            <article>
                article 2
            </article>
		</main>
        
        <aside role="complementary">
            <section class="widget">		
                <h1 class="widget-title">Some title</h1>		
                <ul>
					<li>
				        <a href="#" title="Some title">Item 1</a>
					</li>
					<li>
				        <a href="#" title="Some title">Item 2</a>
					</li>
					<li>
				        <a href="#" title="Some title">Item 3</a>
					</li>
				</ul>
		    </section>
            <section class="widget">		
                <h1 class="widget-title">Some title</h1>		
                <ul>
					<li>
				        <a href="#" title="Some title">Item 1</a>
					</li>
					<li>
				        <a href="#" title="Some title">Item 2</a>
					</li>
					<li>
				        <a href="#" title="Some title">Item 3</a>
					</li>
				</ul>
		    </section>           
        </aside>
	</div>
	
	<footer role="contentinfo">
	    <aside>
            <h1>Footer, 1st aside</h1>
            <ul>
                <li>Some stuff</li>
                <li>Some other stuff</li>
            </ul>
        </aside>
        <aside>
            <h1>Footer, 2nd aside</h1>
            <ul>
                <li>Some more stuff</li>
                <li>Some more other stuff</li>
            </ul>
        </aside>
        <aside>
            <h1>Should these be <pre>&lt;aside&gt;'s or &lt;section&gt;'s?</pre></h1>
        </aside>
	</footer>
</body>

CSS

body { 
    width: 100%;
    margin: 0;
    padding: 0;
    letter-spacing: -0.31em;
    word-spacing: -0.43em;
}

/* layout */
header, main, aside, footer { vertical-align: top; letter-spacing: normal; word-spacing: normal; }
header { height: 100px; }
main, aside, footer { display: inline-block; }
main[role="main"] { width: 75%; float: left; background: #f2f2f2; }
aside[role="complementary"] { width: 25%; float: left; background: turquoise; }
footer { width: 100%; background: #888; color: white; }

/* spacing */
main article,
aside section,
footer aside { padding: 1em 2em; }