JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/flick/jquery-ui.css">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>
            dataSIGN dragndrop
        </title>
        <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/grids/grids-min.css">

        <script src="js/fullcalendar.js" type="text/javascript">
</script>
        <script src="js/jquery.qtip-1.0.js" type="text/javascript" charset="utf-8">
</script>
        <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8">
</script>
        <script src="js/custom.js" type="text/javascript">
</script>
    </head>
    <body>
        <div id="doc3" class="yui-t2">
            <div id="hd"></div>
            <div id="bd">
                <div id="yui-main">
                    <div class="yui-b">
                        <div class="yui-g">
                            <div id="calendar"></div>
                        </div>
                    </div>
                </div> 
                <div class="yui-b">
                    <div id="miniCalendar"></div>
                    <div class="add-event">
                        <button id="add-event-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text add-event">Add Event</span></button>
                    </div>
                    <div id="external-events">
                    <h4>Draggable Events</h4>
                    <div style="position: relative;" class="external-event ui-draggable">My Event 1</div>
                    <div style="position: relative;"...

CSS

/* Modal event details */
#time-start-array {
border: red 1px solid;
display: none; 
position: absolute;  
background-color: #ffffff;             
height: 100px;
width: 80px; 
overflow-y: scroll;
overflow-x: hidden;
padding: 0px 5px;
border: 1px solid #aeaeae;  
margin-top: -1.5em;  
margin-left: 94px;
} 

#time-end-array {
display: none; 
position: absolute;  
background-color: #ffffff;             
height: 100px;   
width: 80px;
overflow-y: scroll;
overflow-x: hidden;
padding: 0px 5px;
border: 1px solid #aeaeae;  
margin-top: -1.5em;
margin-left: 210px;
 
}


body {
font-family: helvetica; 
font-size: .8em;   
padding-top: 10px;
}   
    
.important, .important a {
border-color: red;
background-color: red;
font-weight: bold;
}

.ui-dialog, .ui-datepicker, .ui-button {
font-size: .8em;
}         

.event-detail {
padding: 10px;
}      

.add-event {
padding-top: 10px;
}        

.fc-header-title { 
font-size: 1.2em;
font-weight: bold;
}  
            
.time-digit { 
display: block;   
padding: 0px 10px;
}          

.time-digit:hover {
background-color: #F1F4FF;
}





.title.text {
font-weight: bold;
width: 90%;
}

#time-left {
float: left;
width: 50%;
}

#time-right {
float: right;
width: 50%;
}

.time-from-array {
display: none;
}

input.text {
margin-bottom: 12px;
width: 80px;
padding: .4em;
}

#dialog-inner {    
padding: 10px;
text-align: left;   
} 

/* End modal event details */     

/*Validation */   

#field { margin-left: .5em; float: left; }

#field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }

br { clear: both; }

input { border: 1px solid black; margin-bottom: .5em;  }

input.error { border: 1px solid red; }

label.error {
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
    padding-left: 16px;
    margin-left: .3em;
}

label.valid {
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
   ...

JavaScript

/*!
* jquery.qtip. The jQuery tooltip plugin
*
* Copyright (c) 2009 Craig Thompson
* http://craigsworks.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* Launch  : February 2009
* Version : 1.0.0-rc3
* Released: Tuesday 12th May, 2009 - 00:00
* Debug: jquery.qtip.debug.js
*/

"use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
/*jslint browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, bitwise: true, regexp: true, strict: true, newcap: true, immed: true */

/*global window: false, jQuery: false */
(function ($) {
    // Assign cache and event initialisation on document load
    $(document).ready(function () {
        // Adjust positions of the tooltips on window resize or scroll if enabled
        var i;
        $(window).bind('resize scroll', function (event) {
            for (i = 0; i < $.fn.qtip.interfaces.length; i++) {
                // Access current elements API
                var api = $.fn.qtip.interfaces[i];

                // Update position if resize or scroll adjustments are enabled
                if(api && api.status && api.status.rendered && api.options.position.type !== 'static' && api.elements.tooltip.is(':visible') &&
                (api.options.position.adjust.scroll && event.type === 'scroll' || api.options.position.adjust.resize && event.type === 'resize')) {
                    // Queue the animation so positions are updated correctly
                    api.updatePosition(event, true);
                }
            }
        });

        // Hide unfocus toolipts on document mousedown
        $(document).bind('mouseenter.qtip', function (event) {
            if($(event.target).parents('div.qtip').length === 0) {
                var tooltip = $('.qtipSelector'),
                    api = tooltip.qtip('api');

                // Only hide if its visible and not the tooltips target
              ...