JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Didact+Gothic"
rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee"
vlink="#551a8b">
<div id="header-wrapper">
<div id="header" class="container">
<div style="color: white;" id="logo">
<h1 style="background-color: white;"><a href="#"><img
src="../BHN_LOGO.jpg" alt="" /></a></h1>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#" accesskey="1" title="">Startseite</a></li>
<li><a href="http://bhn-ev.de/Kontakt.htm" accesskey="2" title="">Kontakt</a></li>
<ul>
<li><a href="#" accesskey="3" title="">Ansprechpartner</a></li>
</ul>
<li><a href="#" accesskey="4" title="">Service</a></li>
<li><a href="#" accesskey="5" title="">Download</a></li>
</ul>
</div>
</div>
<div id="banner" class="container">
<div class="title">
<p class="MsoNormal"
style="color: rgb(0, 0, 0); font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; font-family: Arial; text-align: start;"><big><span
style="font-size: 12pt; line-height: 18.4px;">Wir freuen uns, Sie auf
dieser Seite begrüßen zu können.<o:p /></span></big></p>
<p class="MsoNormal"
style="color: rgb(0, 0, 0); font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; font-family:...

CSS

html, body
	{
		height: 100%;
	}
	
	body
	{
		margin: 0px;
		padding: 0px;
		background: #181818;
		font-family: 'Didact Gothic', sans-serif;
		font-size: 12pt;
		font-weight: 200;
		color: #FFF;
	}
	
	
	h1, h2, h3
	{
		margin: 0;
		padding: 0;
	}
	
	p, ol, ul
	{
		margin-top: 0;
	}
	
	ol, ul
	{
		padding: 0;
		list-style: none;
	}
	
	p
	{
		line-height: 180%;
	}
	
	strong
	{
	}
	
	a
	{
		color: #ee0000;
	}
	
	a:hover
	{
		text-decoration: none;
	}
	
	.container
	{
		overflow: hidden;
		margin: 0em auto;
		width:100%;max-width:1200px;
	}
	
/*********************************************************************************/
/* Image Style                                                                   */
/*********************************************************************************/

	.image
	{
		display: inline-block;
	}
	
	.image img
	{
		display: block;
		width: 100%;
	}
	
	.image-full
	{
		display: block;
		width: 100%;
		margin: 0 0 2em 0;
	}
	
	.image-left
	{
		float: left;
		margin: 0 2em 2em 0;
	}
	
	.image-centered
	{
		display: block;
		margin: 0 0 2em 0;
	}
	
	.image-centered img
	{
		margin: 0 auto;
		width: auto;
	}

/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/

	ul.style1
	{
	}
	
	ul.actions
	{
	}
	
	ul.actions li
	{
		display: inline-block;
		padding: 0em 0.50em;
	}


/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/

	ul.contact
	{
		margin: 0;
		padding: 2em 0em 0em 0em;
		list-style: none;
	}
	
	ul.contact li
	{
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1em;
	}
	
	ul.contact li span
	{
		display: none;
		margin:...