JSFiddle - React, Tailwind, and code Playground

by cilex

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="p4-datafield-wrapper">
	<div class="p4-datafield-sticky">
		<div class="p4-datafield-library"></div>
	</div>
	<div class="p4-datafield-main">
		<div class="row p4-datafield-global-container">
			<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 p4-datafield-global-recipient-container">
				<div class="p4-datafield-global-recipient"></div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 p4-datafield-global-duration-container">
				<div class="p4-datafield-global-duration"></div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 p4-datafield-global-source-container">
				<div class="p4-datafield-global-source"></div>
			</div>
		</div>
		<div class="row p4-datafield-groups-container">
			<div class="p4-datafield-groups"></div>
		</div>
	</div>
</div>

CSS

@info-sign: '\0a\24d8'; // via http://www.amp-what.com/unicode/search/information - "load all", select "output as css". Lighter than previous \1f6c8

.p4-datafield-wrapper {
	position: relative;
}
.p4-datafield-sticky {
	max-height: 600px;
	height: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
	width: 25%;
	padding: .5em;
	position: absolute;
	top: 0;
	left: 0;
}
.p4-datafield-main {
	margin-left: 27%;
	width: 70%;
	padding: .5em;
}

.p4-datafield-class {
	margin: 18px 0 15px 15px;
	font-weight: bold;
}

.p4-datafield-global-title {
	font-weight: bold;
}

.p4-datafield-recipient-has-tooltip:after {
	content: @info-sign;
	font-size: smaller;
}

.p4-duration-tooltip:before {
	content: @info-sign;
	font-weight: bold;
}

.p4-datafield-category-label {
	font-weight: bold;
	margin-bottom: 6px;
}

.p4-datafield-category-details {
	font-style: italic;
	font-size: smaller;
	margin-bottom: 4px;
}

.p4-datafield-category {
	float: left;
	width: 100%;
	padding-bottom: 3px;
}

.p4-datafield-category-info {
	margin: 5px;
	margin-left: 10px;
	margin-bottom: 3px;
}

.p4-datafield-class-img {
	width: auto;
	height: 40px;
	margin-right: 5px;
}

.p4-datafield-sensitivity-NORISK {background-color: lightgreen}
.p4-datafield-sensitivity-CASUAL {background-color: lightblue}
.p4-datafield-sensitivity-RISKY {background-color: yellow}
.p4-datafield-sensitivity-HIGH_RISK {background-color: red}
.p4-datafield-selected {opacity:.5}

.p4-datafield-editor-combo {width: 80%;}
.p4-datafield-editor-reset {width: 20%; float: right; padding: 0; height: 80%; margin: 0}

.p4-datafield-groups {}
.p4-datafield-groups-container {}

.p4-datafield-global-container {
	/*margin-left: 25px;
	height: 250px;*/
}

.p4-datafield-recipient-group {
	font-weight: bold;
}

.p4-datafield-global-recipient-container>span, .p4-datafield-global-duration-container>span, .p4-datafield-global-source-container>span {
	display: block;
	margin-top: 6px;
	margin-bottom: 6px;
}

.p4-datafield-group-subjects-label...

JavaScript

/*
 * jQuery sprintf - perl based functionallity for sprintf and friends.
 *
 * Copyright © 2008 Carl Fürstenberg
 *
 * Released under GPL, BSD, or MIT license.
 * ---------------------------------------------------------------------------
 *  GPL:
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 * Copyright (c) The Regents of the University of California.
 * All rights reserved.
 *
 * ---------------------------------------------------------------------------
 *  BSD:
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 * 3. Neither the name of the University nor the names of its contributors
 *    may be used to endorse or promote products derived from this software
 *    without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS...