JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<section class="container">
	<section class="logo"></section>
	<main></main>
	<aside></aside>
</section>

CSS

.container{
	max-width: 1000px;
	width: 80%;
	background: #ddd;
	padding: 1em;
	overflow: hidden;
	margin: 0 auto;
}
.logo{
	background: #999;
	padding: 1em;
	margin: 0 0 1em 0;
}
main{
	background: #999;
	max-width: 500px;
	width: 80%;
	float: left;
	padding: 3em;
}
aside{
	background: #999;
	float: right;
	max-width: 100px;
	width: 20%;
	padding: 3em;
}
@media ( max-width: 1100px ) {
	main, aside{
		float: none;
		width: auto;
		margin: 1em auto;
		max-width: none;
	}
}