JSFiddle - React, Tailwind, and code Playground

by Viktor Kosilov

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
    <div id="wrapper">
        <header>
			<a href="#" id="logo"><img src="./fcslogo.png"></a>
			<nav>
				<a href="#" id="menu-icon"></a>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Kontakt</a></li>
					<li><a href="#">Impressum</a></li>
					<li><a href="#">Fernwartung</a></li>
				</ul>
			</nav>
		</header>
        <div class="line">
            <div class="box">
            </div>
            <div class="box">
               <p>
                 Riesige Server und Rechenzentren, noch Fragen? Bla Bla Bla Bla Bla Bla wann kommt der                   Umbruch? Und weiterer Text und so weiter viele Bäume wachsen im Wald
               </p> 
               <button>Leistungen Geschäftskunde</button>
            </div>
        </div>
        <div class="line">
            <div class="box">
                <p>
                  Schnelle Gamingrechner, Flotte Bürolaptops dann bist du hier genau richtig
                </p><button>Leistungen Privatkunde</button>
                </div>
            <div class="box">
            </div>
        </div>
    </div>
</body>
</html>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
}
a {
	color: #333;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: #111;
}
p {
  
}
header {
	background: #fff;
	width: 100%;
	height: 76px;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 1px solid #333;
	z-index: 100;
}
#logo{
	margin: 15px;
	float: left;
	height: 40px;
	background: url(../img/logo.png) no-repeat center;
	display: block;
	margin-left: 10%;
}
nav {
	font-size: 1.25em;
	float: right;
	padding: 20px;	
	margin-right: 10%;
}
#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: #fff url(./images/mobile_menue.png) center;
}
a:hover#menu-icon {
	background-color: #444;
	border-radius: 4px 4px 0 0;
}
ul {
	list-style: none;
}
li {
	display: inline-block;
	float: left;
	padding: 10px
}
section {
	margin-top: 80px;
	text-align: center;
}
::selection {
    background: #ee9a49;
    color: #fff;
}
::-moz-selection {
    background: #ee9a49;
    color: #fff;
}
#wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.line {
	flex: 1 1 10px;
	display: flex;
}
.box {
	flex: 1 1 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content:...