JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://doc.wikimedia.org/VisualEditor/master/lib/ve/lib/oojs-ui/oojs-ui.svg.css">
<link rel="stylesheet" href="https://doc.wikimedia.org/VisualEditor/master/lib/ve/lib/oojs-ui/oojs-ui-apex.css">
<script src="https://doc.wikimedia.org/VisualEditor/master/lib/ve/lib/oojs/oojs.js"></script>
<script src="https://doc.wikimedia.org/VisualEditor/master/lib/ve/lib/oojs-ui/oojs-ui.js"></script>
<div class="oo-ui-demo oo-ui-demo-dialog"></div>

CSS

body {
	font-size: 100%;
	font-family: sans-serif;
}

/* Layout */

.oo-ui-demo {
	font-size: 0.8em;
	width: 50em;
	margin: 3em auto;
	padding: 2em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0 0.25em 1em rgba(0,0,0,0.25);
	border-radius: 0.5em;
}

.oo-ui-demo-toolbar {
	padding: 0;
	font-size: 1em;
}

.oo-ui-demo-toolbar-contents {
	padding: 2em;
	font-size: 0.8em;
	min-height: 300px;
}

.oo-ui-demo-item {
	clear: both;
	padding: 1em 0;
}

.oo-ui-demo-item:not(:last-child) {
	margin-bottom: 1em;
}

.oo-ui-demo-item-label {
	width: 30%;
	float: left;
	line-height: 2em;
}

.oo-ui-demo-item-widget {
	width: 60%;
	float: right;
}

/* Console */

.oo-ui-demo-console {
	clear: both;
	float: right;
	position: relative;
	margin: 0.5em 0;
	border: 1px solid transparent;
	line-height: 1.4;
}

.oo-ui-demo-console-expanded {
	width: 60%;
	border-color: #aaa;
}

.oo-ui-demo-console-toggle {
	position: absolute;
	bottom: 100%;
	margin-bottom: 0.5em;
	right: 0;
	cursor: pointer;
}

.oo-ui-demo-console-toggle::after {
	position: relative;
	display: inline-block;
	width: 1.6em;
	background: #f9f9f9;
	border-radius: 50%;
	line-height: 1.6em;
	color: #999;
	text-align: center;
	content: "→";
	cursor: pointer;
}

.oo-ui-demo-console-toggle:hover::after,
.oo-ui-demo-console-expanded .oo-ui-demo-console-toggle::after {
	background: #eee;
	color: #333;
}

.oo-ui-demo-console-expanded .oo-ui-demo-console-toggle::after {
	content: "↑";
}

.oo-ui-demo-console-collapsed .oo-ui-demo-console-log,
.oo-ui-demo-console-collapsed .oo-ui-demo-console-label,
.oo-ui-demo-console-collapsed .oo-ui-demo-console-submit {
	display: none;
}

.oo-ui-demo-console-log {
	border: 1px solid #eee;
	border-width: 0 0 1px 0;
	max-height: 5em;
	overflow: auto;
}

.oo-ui-demo-console-log-line {
	position: relative;
	padding-left: 20px;
}

.oo-ui-demo-console-log-line-input {
	font-style: italic;
	color:...

JavaScript

$( function () {
	var i, l,
		openButton,
		fieldset,
		$demo = $( '.oo-ui-demo' ),
		dialogs = [
			{
				'name': 'Small dialog',
				'config': {
					'size': 'small'
				}
			},
			{
				'name': 'Medium dialog',
				'config': {
					'size': 'medium'
				}
			},
			{
				'name': 'Confirmation dialog',
				'dialogClass': OO.ui.ConfirmationDialog,
				'data': {
					'prompt': 'Prompt text',
					'okLabel': 'Custom ok text',
					'cancelLabel': 'Custom cancel text'
				}
			}
		];

	function SampleDialog( config ) {
		config = $.extend( { 'title': 'Title' }, config );
		SampleDialog.super.call( this, config );
	}

	OO.inheritClass( SampleDialog, OO.ui.Dialog );

	SampleDialog.prototype.initialize = function () {
		SampleDialog.super.prototype.initialize.apply( this, arguments );

		this.$body.html( '<p>Dialog content</p>' );
		this.$foot.html( 'Footer' );
	};

	function openDialog( DialogClass, config, data ) {
		var dialog = new DialogClass( config );
		$( 'body' ).append( dialog.$element );
		dialog.open( data );
	}

	fieldset = new OO.ui.FieldsetLayout( { 'label': 'Dialogs' } );
	for ( i = 0, l = dialogs.length; i < l; i++ ) {
		openButton = new OO.ui.ButtonWidget( { 'label': 'Open' } );
		openButton.on( 'click', OO.ui.bind(
			openDialog, null,
			dialogs[i].dialogClass || SampleDialog,
			dialogs[i].config,
			dialogs[i].data
		) );
		fieldset.addItems( [
			new OO.ui.FieldLayout(
				openButton,
				{ 'label': dialogs[i].name }
			)
		] );
	}

	$demo.append( fieldset.$element );
} );