JSFiddle - React, Tailwind, and code Playground

HTML

<body>

	<div id="huvud">
			
	</div>
	
	<div id="nav-yttre">
		<div id="nav-mitten">
			<ul id="nav-inre">
				<li><a href="index.html">HEM</a></li>
				<li><a href="om_oss.html">OM OSS</a></li>
				<li><a href="blogg.html">BLOGG</a></li>
				<li><a href="marken.html">M&Auml;RKEN</a></li>		
				<li><a href="hitta_hit.html">HITTA HIT</a></li>
			</ul>
		</div>
	</div>
	
	<div id="main">
		
		<p>Hem</p>
		
	</div>
	
	<div id="right">
		<p>This container</p>
	</div>
	
	<div id="fot">
		<div id="adress">
			<p id="rub">BES&Ouml;KSADRESS</p>
			<p>V&auml;gen 1, 12345 Stockholm</p>
		</div>
		
		<div id="kontakt">
			<p id="rub">KONTAKTA OSS</p>
			<p>Telefon: 08-123 45 67</p>
			<p>Mail: [email protected]</p>
		</div>
		
		<div id="tider">
			<p id="rub">&Ouml;PPETTIDER</p>
			<p>Vardagar: 10-19<br>L&ouml;rdag: 10-17<br>S&ouml;ndag: 11-16</p>	
		</div>
		
		<div id="design">
			<p>Webbplatsen &auml;r gjord av MD</a></p>
		</div>

	</div>


</body>

CSS

/* Header */

#huvud{
width: 1000px;
margin: 0 auto;
}

#header{
display: block;
}

/* Meny */

#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}

#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}

#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', cursive;
font-size: 25px;
}

#nav-inre li{
display: table-cell;
}

#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}

#nav-inre li #here{
color: #221f20;
}

#nav-inre li a:hover{
color: #221f20;
}

/* Main */

#main{
width: 1000px;
margin: 0 auto;
min-height: 500px;
}

#fadein { 
margin: 10px auto;
position:relative; 
width:281px; 
height:500px; 
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#fadein img { 
position:absolute; 
}

/* Right */

#right{
position: absolute;
left: 1450px;
top: 200px;
background-color: #221f20;
height: 300px;
width: 200px;
}

#right p{
color: white;
}

/* Fot */

#fot{
width: 1000px;
margin: 0 auto;
border-top: solid #221f20 1px;
text-align: center;
clear: both;
}

#adress{
width: 334px;
float: left;
}

#kontakt{
width: 333px;
float: left;
}

#tider{
width: 333px;
float: right;
}

#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url(rusty-bar-small.jpg);
}

#design p{
color: #eeeeee;
font-weight: bold;
}

#design a{
color: #eeeeee;
}

#design a:hover{
color: #221f20;
}

#rub{
font-weight: bold;
}

/* Allmänt */

p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}