JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div id="wrapper">
<div id="header"> <img
style="width: 100px; height: 100px;" alt="PK Logo"
src="//placehold.it/100x100"></div>
<div id="navigation"></div>
 
<div id="content">
   <span style="">also mal was schreiben bla bla bla</span><br>
<font size="+2">
<span style="font-family: Freestyle Script;"></span></font>
<font
id="font" size="+2"><span
style="font-family: Freestyle Script;"><br>
<br>
<br>
</span></font></div>
<div id="footer">footer</div>
<br>
</div>

CSS

html,body {
  margin:0;
  padding:0;
}
#wrapper {
background-repeat: no-repeat;
opacity: 0.7;
background-image: url(../Website%20Komponenten/Background%20Vers2_1920x1200.jpg);
width: 100%;
height: 100%;
background-attachment: fixed;
position: absolute;
background-position: center center;
background:#698DBE;
}
#header {
border-style: none;
border-width: 0px;
height: 100px;
width: 60%;
margin-right: 20%;
margin-left: 20%;
margin-bottom: 5px;
opacity: 0.7;
background-color: #f3f3e4;
}
#content {
width: 60%;
margin-right: 20%;
margin-left: 20%;
margin-top: 5px;
height: 400px;
background-color: #f3f3e4;
opacity: 0.7;
}
#navigation {
width: 60%;
margin-right: 20%;
margin-left: 20%;
height: 20px;
background-color: #f3f3e4;
opacity: 0.7;
}
#footer {
margin: 5px 20% 5%;
background-color: #f3f3e4;
width: 60%;
opacity: 0.7;
}