JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<div id="wrapper">
	<div id="header">
    	<h1>Page title</h1>
        <h3>Subtitle</h3>
    </div>
    <div id="main">
    	<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat augue eget magna pulvinar, ac suscipit tortor dictum. Sed in dui ut sem lacinia rutrum eu tincidunt turpis. Donec ultricies sed dolor quis tempor. Phasellus sed ultricies elit, eu pulvinar diam. Vivamus in tempus nunc. Ut dapibus elit id felis iaculis molestie. Integer aliquam mauris ut sapien viverra suscipit. Mauris non nunc id purus molestie aliquet non sed nibh. Ut quis augue ut lacus tempus mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Fusce quis bibendum est, et dignissim dolor. Phasellus rhoncus odio non nisl commodo, convallis ornare turpis auctor. Maecenas gravida arcu quis ligula tincidunt pharetra. Maecenas nec erat orci. Donec non nibh eu diam feugiat fermentum nec laoreet justo. Donec feugiat ultricies rutrum. Nunc imperdiet molestie lectus, vitae vulputate odio ultricies congue. Nulla facilisi. Ut hendrerit fringilla sapien in interdum. Morbi ultricies rhoncus sem, sed mollis tortor tincidunt vitae.

Nulla facilisi. Pellentesque nulla quam, luctus ut felis in, volutpat hendrerit diam. Vivamus erat lacus, dapibus vitae posuere sed, elementum at quam. Cras sit amet lorem non nisl sagittis adipiscing. Phasellus vitae mi sit amet lectus aliquet pulvinar consequat eu ligula. Donec faucibus velit metus, sit amet sodales neque imperdiet et. In molestie urna dolor, sed sodales tellus sodales in. Nam vel ullamcorper massa. Duis ac mauris eu nisi placerat pellentesque. Quisque aliquet viverra sem, a accumsan dolor sodales ultrices. Donec imperdiet, massa ut facilisis auctor, sem libero sagittis urna, eget laoreet justo libero sit amet lectus. Aenean et laoreet diam.

Nam at sapien mauris. Nam eu...

CSS

body {
	margin: 0;
	padding: 0;
	background-color: #ff1;
}

#wrapper {
	width: 800px;
	margin: 0 auto;
}

#header {
	background-color: rgba(255,255,255,0.7);
}
	
#nav {
	background-color: rgba(255,255,255,0.7);
}

#main {
	background-color: rgba(255,255,255,0.7);
}

.content, .sidebar {
	float: left;
	padding: 20px;
}

.content {
	width: 510px;	
}

.sidebar {
	width: 210px;
}

#footer {
	background-color: rgba(255,255,255,0.7);
	clear:both;
}
.content,.sidebar {background:#000;color:#fff;}