JSFiddle - React, Tailwind, and code Playground

by 891006

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <link rel="stylesheet" href="common.css" />
    <style type="text/css">
        a{text-decoration:none;}
        ul,li{list-style-type:none;}
        .menu{padding:30px;}
        .menu>li{float:left;background:#eee;border:2px #33b5e5 solid;width:100px;height:30px;line-height:30px;text-align:center;margin-left:-2px;}
        .menu>li:hover{background:white;}
        .menu li ul{width:100%;border:2px #09c solid;margin-left:-2px;}
        .menu li ul li:hover{background:#eee;}
    </style>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>
    <ul class="menu">
        <li><a href="#">菜单</a>
            <ul class="drop   child_01">
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
            </ul>
        </li>
        <li><a href="#">菜单</a>
            <ul class="drop">
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
            </ul>
        </li>
        <li><a href="#">菜单</a>
            <ul class="drop">
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
                <li><a href="#">子菜单</a></li>
            </ul>
        </li>
        <li><a href="#">菜单</a>
            <ul class="drop">
                <li><a...

CSS

/* CSS Document */
/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,table{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-size:normal;}
ol,ul{list-style:}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:"";}
abbr,acroonym{border:0;}
address{font-style:normal;}

/* basic common CSS */
/* font */
.f_12{font-size:12px;}
.f_14{font-size:14px;}
.f_16{font-size:16px;}
.fw_n{font-weight:normal;}
.ti_2{text-indent:2em;}
/* position */
.p_r{position:relative;}
.p_a{position:absolute;}
.f_l{float:left;}
.f_r{float:right;}
.ta_c{text-align:center;}
.c_b{clear:both;}
.c_l{clear:left;}
.c_r{clear:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}*html .clearfix{height:1%;display:inline-block;}/* hack */
.zoom{zoom:1;}
.hidden{visibility:hidden;}
.none{display:none;}
.block{display:block;}
.inline{display:inline;}
.baseline{vertical-align:baseline;}
/* 长宽 */
.w_100{width:100%;}

JavaScript

/*
 * DOM Manipulation Functions
 *
 */

/*
 *$():
 *获取一个或者一组DOM节点，可传入参数为id或者DOM节点，支持多个参数的传递。
 */
function $(){
    var elems = [];
    for(var i = 0; i < arguments.length; i++){
        var elem = arguments[i];
        if(typeof elem == "string"){
            elem = document.getElementsById(elem);
        }
        
        if(arguments.length == 1){
            return elem;
        }else{
            elems.push(elem);
        }
    }
    return elems;
}

function camlize(prop){
    return prop.replace(/\-(\w)/g,function(strMatch,p1){
        return p1.toUpperCase();
    });
}
function uncamlize(prop,sep){
    return prop.replace(/[A-Z]/g,function(strMatch){
        return ((sep?sep:"-") + strMatch.toLowerCase());
    })
}

/*
 * arguments:
 * 
 *
 */

function getStyle(elem,props,pseudoEl){
    var styles = {};
    if(elem.currentStyle){
        for(var i = 0; i < props.length; i++){
            if(!(styles[props[i]] = elem.currentStyle[props[i]])) continue;
        }
    }
    if(window.getComputedStyle){
        for(var i = 0; i < props.length; i++){
            if(!(styles[props[i]] = window.getComputedStyle(elem,pseudoEl).getPropertyValue(props[i]))) continue;
        }
        
    }
    return styles;
}

function setStyleById(elem,styles){
    if(!(elem = $(elem))) return false;
    for(var prop in styles){
        if(!styles.hasOwnProperty(prop)) continue;
        if(elem.style.setProperty){
            elem.style.setProperty(camlize(prop),styles[prop],'important');
            //console.log(camlize(prop));
        }else{
            elem.style[camelize(prop)] = styles[prop];
        }
    }
}


function setStyleByClassName(className,styles){
    if(!(elems = getByClassName(className))) return false;
    for(var i = 0; i < elems.length; i++){
        setStyleById(elems[i],styles);
    }
}

function getChildren(elem){
    var elems = [];
    for(var i = 0,children = elem.childNodes, len = children.length; i < len; i ++){
        if (children[i].nodeType...