JSFiddle - React, Tailwind, and code Playground

by Arkl1te

HTML

<body>
    <header></header>
    <div id="big_wrapper">
        <aside>
            <ul>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
	<a href="#">
		<li>Lorem ipsum.</li>
	</a>
</ul>
        </aside>
        <article>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas rem aperiam cum asperiores. Vitae, eos, deserunt, quibusdam, voluptatum inventore enim laudantium eligendi dolorum minima vel quis dolore tempora ducimus repudiandae totam harum voluptate deleniti accusantium est architecto quo eveniet aliquam odio quos odit ratione placeat similique explicabo earum in. Asperiores, voluptatum, neque voluptatibus repellendus quisquam dolore commodi dolorem ullam incidunt esse harum officiis autem consequuntur temporibus veritatis! Accusamus, minus, tenetur quibusdam expedita veniam veritatis nam adipisci! Velit, recusandae, aut, aperiam natus enim similique a voluptatibus non blanditiis adipisci assumenda maxime vel debitis veritatis commodi distinctio fugiat perspiciatis? Inventore, dolor, dolore ut officia laudantium natus ipsum provident iste suscipit accusamus doloremque vel laboriosam perferendis labore aperiam esse recusandae. Repudiandae, sint, voluptatibus minus nemo vel provident reprehenderit doloremque unde nostrum molestias. Totam, rerum, dolorem, accusamus, quasi voluptate quibusdam aliquid quos laudantium qui reiciendis consequatur quae quia ipsum nobis odio laborum ut iure quaerat blanditiis sunt accusantium modi deserunt vitae asperiores saepe quo ex. Aut, quasi, eveniet, beatae, fuga labore sequi iste accusamus adipisci porro repudiandae pariatur libero et voluptas. Ratione, non, maxime, nesciunt optio eum aut repudiandae obcaecati animi eos eaque ex quos fugit vero explicabo...

SCSS

*{
	margin: 0;
	padding: 0;
	border: none;

	//debug:
	//background: rgba(255,0,0,.1);
}

h3{margin: 5px;}
h4{margin: 10px;}
p{margin: 15px;}

body{
	font-family: helvetica, sans-serif;
}

header{
	padding: 5px;
	background: #4f4f4f;
	border-top: 10px solid #294676;
	color: white;
	min-width: 960px;
}

aside{
	background: #4f4f4f;
	float: left;
	width: 175px;
	ul{
		list-style: none;
		a{
			
			&:link{
				text-decoration: none;
			}
			&:link, &:visited{
				color: white;
			}
			li{
				width: 150px;
				display: block;
				min-height: 25px;
				margin: 5px;
				margin-left: 0;
				padding: 5px;
				border-bottom: 3px solid transparent;
				background: transparent;
				border-radius: 0 0 25px 0;
				-webkit-transition: border-bottom .3s, background .3s, color .3s, padding-left .3s;
				-moz-transition: border-bottom .3s, background .3s, color .3s, padding-left .3s;
				-ms-transition: border-bottom .3s, background .3s, color .3s, padding-left .3s;
				-o-transition: border-bottom .3s, background .3s, color .3s, padding-left .3s;
				transition: border-bottom .3s, background .3s, color .3s, padding-left .3s;
				&:hover{
					border-bottom: 3px solid midnightblue;
					background: white;
					color: black;
					padding-left: 15px;
				}
			}
		}
	}
}
.highlight{
	color: slateblue;
}

.spanish_text{
	font-style: italic;
}

article{
	width: 748px;
	float: left;
	padding: 10px;
}
footer{
	text-align: center;
	clear: both;
}