JSFiddle - React, Tailwind, and code Playground

by ripsraps

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Miller's Martial Arts</title>

<style type="text/css">
@import url("css/clean.css");
@import url("css/style.css");
@import url("css/lightbox.css");
@import url("css/style/nyheter.css");
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="script/jquery.easing.min.js"></script>
<script type="text/javascript" src="script/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>

</head>

<body>
<div id="bglight">

    <div class="wrapper">
    
                    <div class="nav">
                        <div class="navlogoplacer"> <a href="index.html"><img src="images/logo.png" width="142" height="96" alt="Miller's Martial Arts" /></a>
                                </div>
                                <div class="navlinkplacer">
                                    <ul class="lavaLampNav" id="1">
                                        <li><a href="index.html">Nyheter</a></li>
                                        <li><a href="kurs.html">Kurs</a></li>
                                        <li><a href="privattimer.php">Privattimer</a></li>
                                        <li><a href="galleri.html">Galleri</a></li>
                                        <li><a href="kontakt.php">Kontakt</a></li>
                                    </ul>
                
                        </div>
        </div>
        
        <div class="txt-nyheter">
        
            <div...

CSS

@font-face {
    font-family: LeagueGothic;
    src: url(../fonts/League_Gothic-webfont.ttf),
    url(../fonts/League_Gothic-webfont.eot),
    url(../fonts/League_Gothic-webfont.woff),
    url(../fonts/League_Gothic-webfont.svg);
    font-weight: normal;
    font-style: normal;
}
body {
    margin: 0;
    padding: 0;
    background-image: url(../images/bg.png);
    background-repeat: repeat;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div#bglight {
    background-image: url(../images/bg-light.png);
    background-repeat: no-repeat;
    background-position: center top;
    text-align: center;
    width: 100%;
    height: 921px;
    min-height: 921px;
    visibility: inherit;
}
.wrapper {
    width: 960px;
    min-height: 720px;
    margin: 0px auto;
    text-align: center;
    background: url(../script/images/bg-light.png) no-repeat;
    padding-top: 20px;
    position: relative;
}

.hr {
    display: block;
    border: none;
    width: 950px;
    height: 2px;
    background: url(../script/images/divider.png);
    margin: 10px 0;
}


/* ---- Nav ---- */
div.wrapper div.nav {
    min-width: 960px;
    width: 960px;
    max-width: 960px;
    clear: both;
    height: 96px;
}
div.navlogoplacer {
    float: left;
    height: 96px;
    width: 142px;
    padding-left: 20px;
}
div.navlinkplacer {
    float: right;
    width: 400px;
    height: 29px;
}

.lavaLampNav {
    position: relative;
    height: 29px;
    width: 400px;
    overflow: hidden;
    padding: 5px;
}
.lavaLampNav li {
    float: left;
    list-style: none;
}
.lavaLampNav li.back {
    width: 9px;
    height: 30px;
    z-index: 3;
    position: absolute;
    background-image: url(../images/lava.gif);
    background-repeat: no-repeat;
    background-position: right -30px;
}
.lavaLampNav li.back .left {
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
    background-image: url(../images/lava.gif);
    background-repeat: no-repeat;
   ...

JavaScript

/**
 * LavaLamp - A menu plugin for jQuery with cool hover effects.
 * @requires jQuery v1.1.3.1 or above
 *
 * http://gmarwaha.com/blog/?p=7
 *
 * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 0.2.0
 * Requires Jquery 1.2.1 from version 0.2.0 onwards. 
 * For jquery 1.1.x, use version 0.1.0 of lavalamp
 */

/**
 * Creates a menu with an unordered list of menu-items. You can either use the CSS that comes with the plugin, or write your own styles 
 * to create a personalized effect
 *
 * The HTML markup used to build the menu can be as simple as...
 *
 *       <ul class="lavaLamp">
 *           <li><a href="#">Home</a></li>
 *           <li><a href="#">Plant a tree</a></li>
 *           <li><a href="#">Travel</a></li>
 *           <li><a href="#">Ride an elephant</a></li>
 *       </ul>
 *
 * Once you have included the style sheet that comes with the plugin, you will have to include 
 * a reference to jquery library, easing plugin(optional) and the LavaLamp(this) plugin.
 *
 * Use the following snippet to initialize the menu.
 *   $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700}) });
 *
 * Thats it. Now you should have a working lavalamp menu. 
 *
 * @param an options object - You can specify all the options shown below as an options object param.
 *
 * @option fx - default is "linear"
 * @example
 * $(".lavaLamp").lavaLamp({ fx: "backout" });
 * @desc Creates a menu with "backout" easing effect. You need to include the easing plugin for this to work.
 *
 * @option speed - default is 500 ms
 * @example
 * $(".lavaLamp").lavaLamp({ speed: 500 });
 * @desc Creates a menu with an animation speed of 500 ms.
 *
 * @option click - no defaults
 * @example
 * $(".lavaLamp").lavaLamp({ click: function(event, menuItem) { return false; } });
 * @desc You can supply a callback to be executed when...