JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style type="text/css">
h1 {
color: #FFFFFF;
}
h2 {
color: black;
font-size: 18;
}
h10 {
font-size: 20;
}
h11 {
font-size: 20;
color: white;
}
div.ueberschrift {
position: fixed;
font-family: Arial;
top: -19;
left: 30;
width: 300px;
}
div.willkommen {
font-family: arial;
position: absolute;
background: lightgray;
width: 390px;
top: 50px;
left: 600px;
opacity: 0.8;
}
div.Ergebniss {
position: absolute;
background: white;
width: 250px;
top: 270px;
left: 670px;
}
div.eingaben {
position: fixed;
top: 100;
left: 0;
}
div.adds {
position: absolute;
top: 50px;
right: 10px;
ima
}
div.sidebar {
position: absolute;
top: 50;
left: 10px;
height: 800px;
width: 200px;
background: gray;
}
div.discord {
position: absolute;
right: 10;
top: 50;
}
div.head {
position: fixed;
color: white;
top: 0;
left: 0px;
height: 40px;
width: 100%;
background: black;
}
div.option {
position: fixed;
top: -20;
left: 10;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 20%;
left: 150%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
...
CSS
body {
margin: 0;
padding: 0;
}
.sidebar,
.content {
background: #333;
color: #fff;
height: 500px;
border-radius: 4px;
margin: 20px;
border: 1px solid #777;
}
.sidebar {
width: 300px;
float: left;
position: absolute;
}
.content {
width: 630px;
}