JSFiddle - React, Tailwind, and code Playground

by Joren Wouters

HTML

<!DOCTYPE HTML>

<body>
<div id="header1">
Naam Bedrijf
</div>
<div id="windows8">
<div class="windows8">
    <ul>
	     <li class="overons">
			<div id="number">01</div>
			<div id="title">
			<p class="title">Over ons</p>
			<br>
			<p class="boxcontent">Hier kunt uw informatie over uw bedrijf neerzetten</p>
			</div>
		 </li>
		 <li class="twitter">
		 </li>
		 <li class="services">
		    <div id="number">02</di
                v>
			<div id="title">
			<p class="title">Services</p>
			<br>
			<p class="boxcontent">Hier kunt u bijvoorbeeld uw services neerzetten</p>
			</div>
		 </li>
		 <li class="image">
             <div id="image1">
             </div>
             <div id="image2">
             </div>
		 </li>
		 <li class="products">
		    <div id="number">03</div>
			<div id="title">
			<p class="title">Producten</p>
			<br>
			<p class="boxcontent">Hier kunt u uw product neerzetten</p>
			</div>
		 </li>
		 <li class="#">
             <div id="image1">
             </div>
             <div id="image2">
             </div>
		 </li>
		 <li class="contact1">
		    <div id="number">04</div>
			<div id="title">
			<p class="title">Contact</p>
			<br>
			<p class="boxcontent">Hier kunt u bijvoorbeeld uw services neerzetten</p>
			</div>
		 </li>
		 <li class="contact2">
		    <div id="title">
		         <p class="title2">Quick Contact</p>
			     <form method="post" action="contact.php">
                 <textarea name="message" placeholder="Message"></textarea>
		         <div id="name">
			         <input name="name" placeholder="Name">
                     <input name="email" type="email" placeholder="Email">
                 </div>
                <div id="verzenden">
                     <input id="submit" name="submit" type="submit" value="Send">
                </div>
		    </div>
		 </li>
	</ul>	 
</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, 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,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body {
 margin: 0;
 }
p {
 margin: 0;
 }
body {
background: radial-gradient(#484848, #000);
}
#header1 {
margin-left: 490px;
margin-top: 30px;
font-family: Verdana;
font-size: 40px;
height: 70px;
width: 350px;
text-align: center;
color: #fff;
}
#windows8 {
margin: 0px auto;
height: 575px;
width: 1100px;
padding: 0;
border: 1px solid #fff;
color: #fff;
}
.windows8 {
height: 500px;
width: 925px;
padding: 5px;
margin: 5px auto;
}
#windows8 ul {
margin: 0;
padding: 0;
}
#windows8 li {
margin: 5px;
height: 125px; 
width: 450px;
float: left;
background: #fff;
list-style: none;
}
#windows8 ul li a {
list-style: none;
text-decoration: none;
color: #000;
padding: 0;
}
#windows8 .overons {
background: #8364A2;
}

#windows8 .overons #number {
font-size: 100px;
font-family: Verdana;
color: #404040 ;
margin-left: 15px;
float: left;
}
#windows8 .overons #title {
margin-left: 150px;
margin-top: 10px;
height: 105px;
}
.title {
color: #fff;
font-size: 22px;
font-family: Verdana;
}
.boxcontent {
color: #fff;
font-size: 13px;
font-family: Verdana;
}
#windows8 .twitter {
background: #663399;
}
#windows8 .services {
background: #99CC33;
}
#windows8 .services #number {
font-size: 100px;
font-family: Verdana;
color: #404040 ;
margin-left: 15px;
}
#windows8 .services #title {
margin-left: 150px;
margin-top: -110px;
height: 105px;
}
.title {
color: #fff;
font-size: 22px;
font-family:...