JSFiddle - React, Tailwind, and code Playground

by Ni3l55

HTML

<body>
		<div id="wrapper">
			<div id="header">
				<div id="upper"></div>
				<div id="uppermenu"></div>
				<div id="menu">
					<div id="menuline">
						<div id="menuleft">
							<div id="logo"></div>
						</div>
						<div id="CSSmenu">
							<ul id="nav">

								<li><a href="#">Contact</a></li>
                                
                                <li><a href="#">Portfolio</a></li>

								<li><a href="#">Werkwijze</a></li>
                                
                                <li><a href="#">Diensten</a></li>

								<li><a href="#">Home</a></li>

							</ul>
						</div>
					</div>	
				</div>
			<div id="body">
				<div id="slideshow">
					<div>
						<img src="macmini.png">
					</div>
					<div>
						<img src="OSX.png">
					</div>
					<div>
						<img src="nw.jpg">
					</div>
				</div>
				<div id="context">
                    <div id="upcontext">
                        <div id="left">
                            <div id="topbox">
                                <div id="leftbox">
                                    <div id="circle">
                                        <i class="icon-desktop icon-4x"></i>
                                    </div>
                                </div>
                                <p class="headtext">Uw eigen website!</p>
                            </div>
                                <div id="textbox">
                                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper vel enim sed pretium. In hac habitasse platea dictumst. Nulla facilisi. Ut lorem arcu, tempus euismod consequat eu, dignissim nec.</p>
                                </div>
                        </div>
                        <div id="center">
                            <div id="topbox">
                                <div id="leftbox">
                                    <div id="circle">
                                        <i...

CSS

/*Made by Niels Stockmann
general styles*/

*{ 
	margin: 0; 
	padding: 0;
}

#wrapper{
	text-align: center;
}

/*Header*/

#upper{
	height: 10px;
	background-color: #427797;
	width: 100%;
}

#uppermenu{
	height: 5px;
}

#menu{
	height: 80px;
}

#menuleft{
	height: 74px;
	width: 430px;
}

#menuline{
	width: 1000px;
    text-align: center;
    margin: auto;
}

#logo{
	height: 74px;
	width: 380px;
	background-image: url(logo.png);
}


#context{
	height: 450px;
    width: 1000px;
    text-align: center;
    margin: auto;
	margin-top: 10px;
}

#nav
{
    padding:0;
    margin-top: -40px;
}

#nav li 
{
    display:inline;
}

#nav li a 
{   
   font-family: verdana;
   font-size: 12px;
   text-decoration: none;
   float:right;
   padding: 10px;
   background-color: transparent;
   color: black;
}

#nav li a:hover 
{
   background-color:#427797;
   padding-bottom:20px;
   border-bottom:0px;
   color: white;
}

#upcontext{
    height: 300px;
}

#left{
    margin-top:50px;
    width:266.667px;
    height:300px;
    margin-left:50px;
}

#center{
    margin-top:50px;
    width:266.667px;
    height:300px;
    margin-top:-300px;
    margin-left:366.667px;
}

#right{
    margin-top:50px;
    width:266.667px;
    height:300px;
    margin-left:683.667px;
    margin-top:-300px;
    margin-right:50px;
}

#topbox{
    height:65px;
}

#circle{
   width:65px;
   height:65px;
   border-radius:50%;
   overflow:hidden;
   background-color: #427797;  
}

p.headtext{
    margin-top:-65px;
    padding-top:20px;
    padding-left:60px;
    font-size:20px;
    font-family:  "verdana";
}

#leftbox{
    height:65px;
    width:65px;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=3.2.1');
  src: url('font/fontawesome-webfont.eot?#iefix&amp;v=3.2.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),...