JSFiddle - React, Tailwind, and code Playground

by Joren Wouters

HTML

<div id="pricetables">
<div id="pricetable0">
     <div class="top0">
     </div>
     <div id="names">
         <div class="name">
		     <p class="tekst-box">Data</p>
		 </div>
		 <div class="name" id="second">
		     <p class="tekst-box">Opslag</p>
		 </div>
		 <div class="name">
		     <p class="tekst-box">E-mail adressen</p>
		 </div>
		 <div class="name" id="second">
		     <p class="tekst-box">Databases</p>
		 </div>
		 <div class="name">
		     <p class="tekst-box">Domeinen</p>
		 </div>
		 <div id="extra">
                 <div class="name" id="second">
		     <p class="tekst-box">FTP Accounts</p>
		 </div>
		 <div class="name">
		     <p class="tekst-box">E-mail forwarders</p>
		 </div>
		 <div class="name" id="second">
		     <p class="tekst-box">E-mail autoresponders</p>
		 </div>
		 <div class="name">
		     <p class="tekst-box">Subdomeinen</p>
		 </div>
		 <div class="name" id="second">
		     <p class="tekst-box">SSL</p>
		 </div>
		 <div class="name">
		     <p class="tekst-box">Installatron</p>
		 </div>
		 <div class="name" id="second">
		     <p class="tekst-box">Technische support</p>
		 </div>
		 <div class="name">
		     <p class="tekst-box">Paneel</p>
		 </div>
		 <div class="name" id="second">
		     <p class="tekst-box">Hardware</p>
		 </div>
		 <div class="last">
		     <p class="tekst-box">Vestiging datacenter</p>
		 </div>
</div>
</div>
</div>
    <div id="footer">
       <div id="footermenu">
	         <?php wp_nav_menu(array('theme_location' => 'secondary'));?>
	   </div>
	   <div id="social">
	          <a href="https://twitter.com/Silver_Worx"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter3.png" /></a>
			  <a href="https://www.facebook.com/pages/Silverworx/574165286008400"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/facebook3.png" /></a>
	          <br>
			  <img id="holland" src="<?php bloginfo('stylesheet_directory'); ?>/images/holland.png" /> 
			  <div class="copyright">Copyright &copy;...

CSS

#pricetables {
margin: 0;
width: 95%;
height: auto;
float: left;
}
#pricetables2 {
margin-top: 50px;
margin-left: 5%;
width: 95%;
float: left;
}
#pricetable0 {
margin: 0;
width: 18%;
float: left;
}
#pricetable10 {
margin: 0;
width: 28%;
float: left;
}

.top0 {
margin: 0;
height: 75px;
width: 100%;
}
#names {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
height: 200px;
}
.name, .last{
margin: 0px auto;
border-top: 1px solid #e0e0e0;
height: 50px;
width: 100%;
font-family: Verdana;
font-size: 15px;
color: #777;
}
.last {
border-bottom: 1px solid #e0e0e0;
}
#pricetable1 {
margin: 0;
width: 15%;
float: left;
}
.top, .top2, .top3, .top4, .top5 {
margin: 0;
height: 75px;
width: 100%;
background: #6a78a7;
}
.top2 {
}
.top3, .top4 {
background: #515f8f;
}
.top5 {
background: #313e6b;
}
.title, .description {
margin: 0px auto;
padding-top: 5px;
font-family: Helvetica;
font-size: 30px;
text-align: center;
color: #fff;
}

.description {
font-size: 15px;
}
#settings {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
height: 200px;
}
.setting, .setting-last {
margin: 0px auto;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
height: 50px;
width: 100%;
font-family: Verdana;
font-size: 15px;
color: #777;
}
#second {
background: #F7F7F7;
}
.setting-last {
border-bottom: 1px solid #e0e0e0;
}
.tekst-box {
margin-top: 15px; 
margin-left: 5%;
}
.tekst-box img {
margin-top: -5px;
margin-left: 37%;
}
#footer {
margin-top: 50px;
height: 130px;
width: 100%;
float: left;
border-top: 1px solid #c8c8c8;
}
#footermenu {
margin-top: 20px;
margin-left: 5%;
width: 70%;
height: 90px;
float: left;
}
#footermenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#footermenu ul li {
font-family: Verdana;
font-weight: bold;
text-transform: uppercase;
float: left;
padding-right: 7%;
}
#footermenu ul li a {
color: #000;
text-decoration: none;
}
#footermenu ul ul {
margin-top: 20px;
}
#footermenu ul ul li {
font-family: Verdana;
font-weight:normal;
text-transform: capitalize;
float:...