JSFiddle - React, Tailwind, and code Playground

by samishii23

HTML

<script src="http://hoa.ath.cx/~dm1/src/js/default.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script type="text/javascript" src="src/js/default.js"></script>
        <script type="text/javascript">
            $(function() { $("#customize-click").bind('click', function() { $("#customize-content").toggle("slow"); }); });
            
            function example() {
    $("#content-main").fadeOut(400).append("Hi").fadeIn(400);
}
        </script>
        <style type="text/css" media="screen">
            @import url(src/css/default.css);
        </style>
        <!--[if IE]><style type="text/css">.content-bg {background-color: none; background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000060,endColorstr=#00000060); zoom:1; }</style><![endif]-->
    </head>
    
    <body>
        <div class="content-body">
            <div class="content-row">
                <div class="content-spacer-l"></div>
                <div class="rnd-bor content-title">TITLE</div>
                <div class="content-spacer-r"></div><!-- FUTURE: User Login Box -->
            </div>
            <div class="content-row">
                <!-- Navigation -->
                <div class="content-spacer-l">&nbsp;</div>
                <div class="content-bg content-nav"></div>
                <div class="content-spacer-r">&nbsp;</div>
            </div>
            <div class="content-row" style="height:15px;"></div>
            <div class="content-row">
                <div class="content-spacer-l"></div>
                <div class="content-bg container" id="content-main">
                    <button onClick="example();">Click...

CSS

body {
    background-image: url(/~dm2/img/background1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left top; }
input, select, form button {
    background-color: rgba(155,200,155,0.5);
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: #000 #ccc #ccc #000;
    padding-left: 5px; }
    
.content-bg {
    border-radius: 25px;
    background-color: rgba(200,225,225,0.6); }
.rnd-bor {
    /* IE 8 has no support for CSS Rounded Borders */
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px; }

.content-title {
    display: table-cell;
    width: 700px;
    height: 52px;
    font-size: 25px;
    color: white;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(155,175,175,0.5);
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;}
.content-nav {
    display: table-cell;
    height: 100px;
    width: 700px;
    overflow: hidden;
    font-size: 23px;
    font-weight: bolder;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; }
.content-nav ul { list-style: none; margin: 0 auto; }
.content-nav ul li {
    float: left;
    padding: 0 4px;
    border-bottom: 1px Solid #000;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; }
.content-nav ul li a { color: #000; text-decoration: none; }
.content-nav ul li:hover { text-shadow: 1px 1px 2px #080; border-bottom-color: #088; }

.content-body { display: table; }
.content-row { display: table-row; }
.content-cell { display: table-cell; }
.content-cell img {
    display: none;
    height: 25px;
    width: 25px;
    cursor: pointer;
    }
.content-cell img:hover {
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    border-color: #ccc #000 #000 #ccc;
    }
.content-spacer-l { display: table-cell; width: 15px; background-color: #000; }
.content-spacer-r { display: table-cell; width: 125px;...