JSFiddle - React, Tailwind, and code Playground

by emanuele45

HTML

<div id="wrapper">
	<div class="top_buttons">
		<a href="index.html">Zurück</a>
		<a href="download.html">Downloads</a>
	</div>
	<div id="left">
		<h2>Benutzer</h2>
		<ul id="navigation">
			<li><a href="reg.html">Registrierung</a></li>
			<li><a href="konto.html">Benutzerkonto</a></li>
			<li><a href="profil.html">Forumprofil</a></li>
			<li><a href="layout.html">Design & Layout</a></li>
			<li><a href="mit.html">Mitteilungen</a></li>
			<li><a href="benach.html">Benachrichtigungen</a></li>
			<li><a href="entw.html">Entwürfe</a></li>
			<li><a href="gef.html">Gefällt mir</a></li>
		</ul>
		<h2>Forum</h2>
		<ul id="navigation">
			<li><a href="beitr.html">Beiträge</a></li>
			<li><a href="datei.html">Dateianhänge</a></li>
			<li><a href="umfrage.html">Umfragen</a></li>
			<li><a href="ereign.html">Ereignisse</a></li>
			<li><a href="abo.html">Abonnements</a></li>
		</ul>
		<h2>Admin</h2>
		<ul id="navigation">
			<li><a href="server.html">Servereinstellungen</a></li>
			<li><a href="forum.html">Forumeinstellungen</a></li>
			<li><a href="spam.html">Sicherheit & Antispam</a></li>
			<li><a href="gruppen.html">Benutzergruppen</a></li>
			<li><a href="rechte.html">Berechtigungen</a></li>
			<li><a href="wartung.html">Wartung</a></li>
		</ul>
	</div>
	<div id="content">
		<h1>Downloads</h1>
		<p>Hier stelle ich Dokumente im PDF-Format zum Download zur Verfügung. Es handelt sich um für den Druck optimierte Kopien der einzelnen Themenbereiche dieser Anleitung. Diese PDFs dürfen von Dir beliebig oft ausgedruckt, kopiert und weitergegeben, nicht aber geändert werden.</p>
		<p>PDFs lassen sich mit Hilfe des Adobe Readers anschauen und ausdrucken. Um dieses Programm herunterzuladen, besuche bitte <a href="http://get.adobe.com/de/reader/" target="_blank">die Adobe-Website.</a></p>
		<p>
		<table cellpadding="4px"><tr><td width="200px"><h2>Benutzer</h2></td><td width="200px"><h2>Inhalt</h2></td></tr>
		<tr><td><a...

CSS

/*
Seitenweite Angaben:
*/
body {
	font: 87.5%/150% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif;
	color: #000000;
	background: #FFFFFF;
	font-size: 80%;
}
#wrapper {
 display: table-row;
}
#left {
	background: #9d406d;
	width: 200px;
	text-align: left;
	color: #FFFFFF;
}
#left, #content {
    vertical-align: top;
	display: table-cell;
}
#content {
	text-align: justify;
    padding-left: 60px;
    padding-top: 25px;
}
/*
Verhalten von Links, seitenweit:
*/
a {
	color: #9d406d;
	font-weight: bold;
	text-decoration: none;
	font-weight: normal;
}
a:hover {
	text-decoration: underline;
	color: #8d325e;
}
a.h1, a.h2, a.h3 {
	color: #8d325e;
}
/*
Das Hauptmenü:
*/
#navigation {
	padding: 0;
	margin: 0;
}
#navigation li {
	display: inline-block;
	list-style-type: none;
	padding: 0px 0px;
}
#navigation a {
	text-decoration: none;
	background: #9d406d;
	color: #FFFFFF;
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: left;
	font-weight: normal;
	width: 160px;
}
#navigation a:hover {
	text-decoration: underline;
	background: #8d325e;
}
#left h2,
#navigation a
{
	padding-left: 20px;
}
/*
Das Topmenü:
*/
.top_buttons
{	
	position: absolute;
	top: 0;
	right: 0;
}
.top_buttons a {
	text-decoration: none;
	background: #9d406d;
	color: #FFFFFF;
	text-align: center;
	font-weight: normal;
	line-height: 30px;
	padding: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	width: 120px;
	display: table-cell;
	vertical-align: middle;
}
.top_buttons a:hover {
	text-decoration: underline;
	background: #8d325e;
}/*
Textliche Formatierungen:
*/
p {
	text-align: justify;
}
h2 {
	font-style: italic;
}
/*
Text für die linke Spalte
*/
#left .h1 {
	font-style: italic;
}