JSFiddle - React, Tailwind, and code Playground

by m1dnight

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head id="ContentPlaceHolderDefault_head"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    Te Huur - Immo Dex
</title><link rel="stylesheet" type="text/css" href="/css/friendly-ghost_dark.css" /><link rel="stylesheet" type="text/css" href="/css/homepage.css" /><link rel="stylesheet" type="text/css" href="/css/dropDown.css" /><link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&amp;subset=latin" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="/css/friendly-ghost_dark.css" /></head>
  <body>
    <div id="main">
      

        <div id="top">
            <div id="topInner">
                <!---<h1 id="siteName">
                  <a href="/" id="siteNameLink">
                    Immo Dex
                    
                  </a>
                </h1>-->

                <h2 id="siteDescription">Verhuren, Verkopen,..</h2>
            </div>
            <div id="naviWrap">
              <div id="naviWrap">
                                <ul id="topNavigation">
                                    <li class="current">
                                        <a href="/">Home</a>
                                     </li><li><a class="navigation" href="/te-koop.aspx"><span>Te Koop</span></a><ul><li><a class="temp" href="#">Appartementen</a></li><li><a class="temp" href="#">Garages</a></li><li><a class="temp" href="#">Handelspanden</a></li><li><a class="temp" href="#">Villa's</a></li><li><a class="temp" href="#">Woningen</a></li></ul></li><li><a class="navigation" href="/te-huur.aspx"><span>Te Huur</span></a><ul><li><a class="temp" href="#">Appartementen</a></li><li><a class="temp" href="#">Handelspanden</a></li><li><a class="temp" href="#">Kantoor</a></li><li><a class="temp" href="#">Woningen</a></li></ul></li><li><a...

CSS

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file    dropdown.css
 * @package    Dropdown
 * @version    0.7.1
 * @type    Transitional
 * @stacks    597-599
 * @browsers  Windows: IE6+, Opera7+, Firefox1+
 *        Mac OS: Safari2+, Firefox2+
 *
 * @link    http://www.lwis.net/
 * @copyright  2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

#naviWrap
{
background-color:#000;
background-color:rgba(0,0,0,0.5);
margin:15px 0 0 0;
}
#topNavigation
{
border-left:1px solid rgba(255,255,255,0.25);
margin:0 auto;
width:960px;
}
#topNavigation ul
{
margin: 0;
padding: 0;
list-style: none;

}
#topNavigation li
{
position: relative;
border-left:1px solid rgba(0,0,0,0.25);
border-right:1px solid rgba(255,255,225,0.25);
display:inline-block;
height:60px;
line-height:60px;
text-align:center;
}
#topNavigation li a /*tekst in list items uit het hoofdmenu */
{
color:#fff;
display:block;
font-size:11px;
height:60px;
padding:0 30px;
text-decoration:none;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
}
#topNavigation li a:hover  /*De list item tekst waar er over gehovered wordt*/
{
background-color:#000;
background-color:rgba(0,0,0,0.2);

text-decoration:underline;
}

#topNavigation li.current
{
background-color:#000;
background-color:rgba(0,0,0,0.5);
}
#topNavigation li:hover ul li
{
display: block;

}

#topNavigation li ul li:hover
{

background-color:rgba(0,0,0,0.8);
display:block;
}

#topNavigation li li /*de list items uit de sub menus*/
{
border-style: none;
position: absolute;
display: none;
float: auto;
background-color:rgba(0,0,0,0.8);

}

#topNavigation li ul
{
  position: absolute;
  left: 0px;
  top: 60px;
  display: inline-block;
}
#topNavigation ul li
{

 position: relative;

 }
 #topNavigation ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
#topNavigation li ul:hover li
{
display:block;
}




/* -- FONTS -- */
@import...