JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<script src="http://mmenu.frebsite.nl/mmenu/src/js/jquery.mmenu.min.all.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/jquery.hammer.min.js"></script>
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mmenu/src/css/jquery.mmenu.all.css">
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mmenu/demo/demo.css">
<div id="page">
			<div id="header">
				<a href="#left"></a>
                <img src="http://www.cdc.gov/TemplatePackage/3.0/images/m-cdc-logo.png" />
			</div>
            <div id="content">
                <p><img alt="Communities Logo" src="//www.cdc.gov/phcommunities/images/communities-banner.png"></p>
                <p>Communities of Practice (CoPs) are working to strengthen public health as members learn, share expertise, and work together on solving common problems in their communities' focus areas. Public health communities are forming and collaborating on <a href="http://www.phConnect.org" target="_blank" title="Link to External Web Site">phConnect.org</a><a href="http://www.cdc.gov/Other/disclaimer.html" class="external"></a>. Join us!</p>
            <div>
			<nav id="left">
				<ul id="nav-primary"><li><a href="/phcommunities/join.html">Join a CoP</a></li><li><a href="/phcommunities/resourcekit/index.html">Resource Kit</a> <ul><li><a href="/phcommunities/resourcekit/where-to-begin.html">Where Should You Begin?</a></li><li><a href="/phcommunities/resourcekit/intro/index.html">Introduction to CoPs</a> <ul><li><a href="/phcommunities/resourcekit/intro/cop_approach.html">CoP Approach</a></li><li><a href="/phcommunities/resourcekit/intro/benefits_of_cop.html">Benefits of a CoP</a></li><li><a href="/phcommunities/resourcekit/intro/responsibilities_cop.html">Responsibilities within CoPs</a></li></ul></li><li><a href="/phcommunities/resourcekit/launch/index.html">Launch a CoP</a> <ul><li><a href="/phcommunities/resourcekit/launch/get_started.html">Get Started</a></li><li><a...

CSS

* {box-sizing: border-box;}
.mm-menu {
    color:#3d316a;
}

.mm-ismenu {
    background:#c5bee1;
}

.mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen, 
.mm-menu.mm-vertical .mm-list li.mm-opened > ul {
    background: #dad5eb;
}

.mm-menu.mm-vertical .mm-list li.mm-opened > ul > li.mm-opened > ul {
    background: #fff;
}


.mm-menu .mm-list > li > a.mm-subopen:after, 
.mm-menu .mm-list > li > a.mm-subclose:before {
    border-color:#3d316a;
}

body {
    background: #fff;
}

nav#left h3 {
    background: #3d316a;
    display: block;
    font-size: 14px;
    line-height: 16px;
    margin: 0;
    padding: 1px 7px;
    margin-top: 10px;    
}

nav#left h3 a {
    color:#fff;
    text-decoration:none;
display: inline-block;
box-sizing: border-box;
font-size: 14px;
line-height: 16px;
margin: 5px;
margin-right: 0;
padding: 5px 0;
width: 80%;
}

#header {
    text-align: left;
    border-top: 6px solid #075290;
    padding:10px 50px;
    height:45px;
    line-height: 45px;
    background:#fff;
}

#header a {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA8UlEQVRoQ+1YMQ7CMBBrB56ABCy8qzOfQAwMLLyCmXexlIEnsOAOHaiUoNZWjkiudFN6ds5OVKttU/nTVr7/xgNEO2gH7ACpgI8QKSDdPnVgBcQLqkPtaXQtwANwd9QZ9R6hpwNcsXDU8srRhj2eUgP0WNjKKbWAT8DtUgMMixstnxwtO0D1R2i8xAfotpZrxwG+0H77dYk5ioBuf8gCRP+itAN2gFTAWYgUcEm7s9AS1ZQ9zkJKNedgOQvNUavYu44SxaROENmBf3PA/4UKOOIsVEDkLIWzUJQDzkJRymd5/SWOtsUO2AFSAR8hUkC6/QMEWDAx/F4OzQAAAABJRU5ErkJggg==);
width: 30px;
height: 30px;
position: absolute;
top: 21px;
left: 9px;    
}

input[type="text"] {
     width: 90%;
height: 30px;
font-size: 16px;
    padding:3px;
    margin-left:4px;
}

input[type="submit"] {
    background:#3d316a;
    width:10%;
    height:30px;
    border:0;
background-image: url('//ssl.gstatic.com/gb/images/v1_53a1fa6a.png');
background-size: 536px 341px;    
    background-position: -466px -207px;
    display: inline-block;
    height: 30px;
    width: 30px;
    position:absolute;
    
}

JavaScript

$(function() {
    $('nav#left').mmenu({
        slidingSubmenus: false
    });
    $('nav#left > ul').prepend('<h3><a href="/phcommunities/index.html">Communities of Practice</a></h3>').prepend('<input type="text" placeholder="SEARCH" /><input type="submit" value="" />');
});