JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="js-d-otazka" title="Otázka 5/50">
    <input name="osoba_odkaz" type="hidden" value="" />
    <p class="zadani_otazky">Zadání otázky</p>
    <table>
        <tr>
            <td class="hodn_sebe">
                <p class="nadpis_sekce">sebehodnocení</p>
                <div class="moznosti">
                    <ul class="js-sortable">
                        <li class="ui-state-default">jedna</li>
                        <li class="ui-state-default">dva</li>
                        <li class="ui-state-default">tri</li>
                        <li class="ui-state-default">ctyri</li>
                    </ul>
                </div>
            </td>
            <td class="hodn_tymu">
                <p class="nadpis_sekce">hodnocení týmu</p>
                <div class="clenove_tymu">
                    <div class="kolega">
                        <p class="jmeno">František Vopička</p>
                        <div class="moznosti">
                            <ul class="js-sortable">
                                <li class="ui-state-default">jedna</li>
                                <li class="ui-state-default">dva</li>
                                <li class="ui-state-default">tri</li>
                                <li class="ui-state-default">ctyri</li>
                            </ul>
                        </div>
                    </div>
                    <div class="kolega">
                        <p class="jmeno">Karel Voříšek</p>
                        <div class="moznosti">
                            <ul class="js-sortable">
                                <li class="ui-state-default">jedna</li>
                                <li class="ui-state-default">dva</li>
                                <li class="ui-state-default">tri</li>
                               ...

CSS

body {
    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size:12px;
    margin:0 0.5em 0.5em;
}
.ui-dialog {
    z-index: 1010 !important;
}
.ui-widget-overlay {
    z-index: 1009 !important;
    background: black !important;
    opacity: 0.6 !important;
}
.ui-menu {
    z-index: 1020 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.ui-widget-content {
    border:none !important;
}
table {
    width: 100%;
    table-layout: fixed;
}
td {
    padding: 0.25em;
    vertical-align:top;
}
th, label {
    font-weight: bold;
    color: #444444;
}
label, legend {
    white-space: nowrap;
}




/* ACTUAL STYLES */
 .zadani_otazky {
    margin:0 0 0.5em 0;
}
.hodn_sebe {
    width:29%;
}
.hodn_tymu {
    width:69%;
}
.nadpis_sekce {
    width:100%;
    background: #BBB;
    color: white;
    font-weight:bold;
    text-align:center;
    margin:0 0 0.5em 0;
}
.moznosti label {
    font-weight:normal;
}
.hodn_tymu .clenove_tymu {
    white-space:nowrap;
    overflow-x:scroll;
    width:100%;
}
.kolega:not(:last-child) {
    border-right: 1px solid gray;
}
.kolega:not(:first-child) {
    margin-left:-0.2em;
}
.kolega {
    display:inline-block;
    white-space:nowrap;
    padding:0 0.5em 0.5em;
}
.jmeno {
    margin:0 0 0.5em;
    border-bottom: 1px solid gray;
}
.js-sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.js-sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.2em 0.2em 0.2em 1.5em;
}
.js-sortable li:hover {
    cursor:pointer;
}
.js-sortable li:active {
    cursor:move;
}
.js-sortable li, .ui-state-highlight {
    height: 1.2em;
    line-height: 1.2em;
}

JavaScript

$(".js-d-otazka").dialog({
    modal: true,
    width: 450,
    buttons: {
        "Další": function () {
            var d = $(this);
        }
    }
});

$(".js-sortable").sortable({
    placeholder: "ui-state-highlight"
});