JSFiddle - React, Tailwind, and code Playground

by Sebastian Kurrek

HTML

<body>

<a name="Seitenanfang"></a>

<div class="wrapper">

	<header class="header">
	<img src="images/flyeroben.jpg" id="flyeroben" alt="Flyer oben">
	<img src="images/farbverlauf.jpg" id="farbverlauf" alt="Farbverlauf">
	</header>

<div class="middle">

<div class="container">
	<nav>	
		<ul id="menu">
 		<li><a href="https://www.google.de/?gws_rd=ssl">Home</a></li>
  		<li><a href="https://www.google.de/?gws_rd=ssl">Angebot</a></li>
  		<li><a href="https://www.google.de/?gws_rd=ssl">Aktuelles</a></li>
  		<li><a href="https://www.google.de/?gws_rd=ssl">Beratende</a></li>
  		<li><a href="https://www.google.de/?gws_rd=ssl">Kontakt</a></li>
  		<li><a href="https://www.google.de/?gws_rd=ssl">Verein</a></li>
  		<li><a href="https://www.google.de/?gws_rd=ssl">Kostenbeteiligung</a></li>
		</ul>  
	</nav>

	<main class="content">
		<div id="content">
			<div id="content"> 
			<h1>{title}</h1>
			{content}
			<p> content bis zum boden <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br><br> <br><br> <br><br> <br><br> <br> <br> Ende </p>
            
            </div>
		</div>
	</main>
</div>

<aside class="left-sidebar">
<img src="images/flyerunten.jpg" id="flyerunten" alt="Flyer unten"> 		
</aside>


<main class="right-sidebar">

	<aside class="right-sidebar1">
		<br> <h1> Kontakt </h1>
		<img src="images/lila.jpg" id="lila" alt="Trennbalken"> 
		<h2>B&uuml;nde</h2> <p> Tel.: 123 </p> <p> weitere Informationen </p>	
		<h2>Herford</h2> <p> Tel.: 123 </p> <p> weitere Informationen </p>
		<h2>Minden</h2> <p> Tel.: 123 </p> <p> weitere Informatione </p>	
	</aside>

	<br>

	<content class="right-sidebar2">
		<br> 
		<h1> Neuigkeiten </h1>
		<img src="images/lila.jpg" id="lila" alt="Trennbalken"> 
		<p></p>
		<div id="news">
		{news number='3' detailpage='news'}
		<p>text</p>
		</div>
		</news> 
		</p>
	</content>
</main>

</div>



</div>

</body>
</html>

CSS

/*	{
	margin: 0;
	padding: 0;
	} */

article, aside, details, figcaption, figure, footer, 
header, hgroup, main, nav, section, summary 
		{
		display: block;
		}

h1, h2, p{
        color: #433a73;
        font-size: 90%;
        }


body 	{
        margin: 0px;
		font: 12px/18px Arial, sans-serif;
		height:100%;
		background-color: #E6E4F1;
		}

.wrapper 	{
		height: 270px;
		width: 100%px;
		margin: 0 auto;
		background-color: #E6E4F1;
		}


.header 	{
		height: 270px;
		background: #E6E4F1;
		}
	

/* Start: expandierende Container */
	.middle 	{
			border-left: 300px solid #433A73;
			border-right: 300px solid #E6E4F1;
			position: relative;
			}

	.middle:after 	{
			display: table;
			clear: both;
			content: '';
			}

	.container 	{
			height:100%;
			width: 100%;
			float: left;
			overflow: hidden;
			margin-right: -100%;
			}
/* Ende: expandierende Container */




.content 	{
			margin:20px 20px 20px 40px;
		    padding:10px;
			border-radius: 4px 4px 4px 4px;
			border-color: #433A73;
			border-style: solid;
    		border-width: 1px;			
		  }




/* Start:Menü */


ul#menu 	{
            position:relative;
            width: 100%;
            height: 60px;
            margin:20px 0px 0px 40px;
            }

ul#menu li 	{
            display: inline-block;
            align-content: center;
            }

ul#menu li a 	{
            margin:0px 5px 0px 5px;
            background-color: #E6E4F1;
            color: #433A73;
            padding: 7px 10px;
            text-decoration: none;
            border-radius: 4px 4px 4px 4px;
            border-style: solid;
            border-color: #433A73;
            border-width: 1px;
            }

ul#menu li a:hover {
            background-color: orange;
            color: #433A73;
                        }
/* Ende:Menü */

.left-sidebar {
		float: left;
		min-height:600px;
		width: 270px;
		position: relative;
		left: -300px;
		}


.right-sidebar  {
		float: right;
		margin-right: -300px;
		width:...