JSFiddle - React, Tailwind, and code Playground

by parikramatic

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>
  <html class="no-js lt-ie9 lt-ie8 lt-ie7">
  <![endif]-->
  <!--[if IE 7]>
    <html class="no-js lt-ie9 lt-ie8">
    <![endif]-->
    <!--[if IE 8]>
      <html class="no-js lt-ie9">
      <![endif]-->
      <!--[if gt IE 8]>
        <!-->
        <html class="no-js">
        <!--<![endif]-->
        
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <title></title>
          <meta name="description" content="">
          <meta name="viewport" content="width=device-width">
          <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
          />
        </head>
        
        <body>
          <div class="content">
             <h1>FCBKcomplete</h1>

            <table>
              <tr>
                <td>
                  <div class="container">
                    <br />
                    <br />
                    <div class="texthelper" id="helperDiv">Helper Div with tooltips</div>
                    <ul id="source">
                      <li id="draggable" class="ui-state-highlight">
                        <div id="commandHolder" class="command">
                          <div class="mover">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                          <div id="text"></div>
                          <div class="phrase">
                            <select id="select3" name="select3">
                              <option value="execd" class="selected">execd</option>
                            </select>
                          </div>
                          <div id="testme"></div>
                      </li>
                    </ul>
                    <ul id="sortable">
                      <li class="ui-state-default">Item 2</li>
                      <li class="ui-state-default">Item 3</li>
                      <li class="ui-state-default">Item 4</li>
                   ...

CSS

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
 html, button, input, select, textarea {
  color: #222;
}
body {
  font-size: 1em;
  line-height: 1.4;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */
 ::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
 hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
 img {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
 fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
 textarea {
  resize: vertical;
}
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
 .chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
 .texthelper {
  border:2px;
  background-color:teal;
  color:white;
}
.command {
  width: 960px;
  border: 0px solid darkgrey;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px 10px 10px;
}
li {
  padding: 5px;
 ...