JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div style="width: 100%; overflow: hidden;">
		<div class="videoPlayerContainer">
			<div id="videoPlayer1">
			</div>
		</div>
		<div id="rightControls" class="controlsContainer" style="width: 39%;">
			<div id="controls" class="leftContainer" style="width: 50%;">
				<center>
					<button id="btnPlay" class="buttons" type="button">
						Play
					</button>
					<button id="btnAddScreenShot" class="buttons" type="button">
						Add screenshot
					</button>
					<div style="width: 120px; height: 20px; margin-top: 10px;">
						<div style="width: 40px; float: left; margin-right: 10px; font-size: small;">
							Volume
						</div>
						<div id="slider" style="width: 60px; float: left; background-color: White; margin-top: 7px;">
						</div>
						<div style="clear: both;">
						</div>
					</div>
				</center>
				<p id="currentTime">
					Current Time <span style="display: inline; color: blue;">0</span>
				</p>
				<p id="html5Video">
					Supports HTML5 video:
				</p>
				<p id="h264Video">
					Supports H264/AVC video:
				</p>
				<p id="oggVideo">
					Supports Ogg/Theora video:
				</p>
				<p id="webMVideo">
					Supports WebM video:
				</p>
			</div>
			<div id="screenShots" class="rightContainer">
				<center>
					<p style="font-weight:...

CSS

canvas {
			margin-bottom: 3px;
		}

		span.green {
			display: inline;
			color: white;
			padding: 2px;
			background: green;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			border-radius: 2px;
		}

		span.red {
			display: inline;
			color: white;
			padding: 2px;
			background: red;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			border-radius: 2px;
		}

		.controlsContainer {
			width: 310px;
			height: 380px;
			margin-left: 7px;
			background: none repeat scroll 0 0 #CFCFCF;
			border: 1px solid #B1B1B1;
			border-radius: 4px;
			moz-border-radius: 4px;
			webkit-border-radius: 4px;
			float: left;
		}

		.leftContainer {
			width: 150px;
			height: 329px;
			padding: 10px;
			float: left;
		}

		.rightContainer {
			width: 30%;
			height: 290px;
			border-color: #999999;
			border-style: none none none solid;
			border-width: 1px;
			overflow-x: hidden;
			overflow-y: auto;
			margin-left: 5px;
			margin-top: 10px;
			padding-left: 16px;
			padding-right: 10px;
			padding-bottom: 10px;
			float: left;
		}

		.buttons {
			width: 150px;
			margin-top: 2px;
		}

		.videoPlayerContainer {
			float: left;
			width: 59%;
		}

		.screenshot {
			background: white;
			border: 1px solid #B1B1B1;
			display: block;
			height: 38px;
			left: 50%;
			margin-left: -54px;
			position: relative;
			width: 100px;
		}

		#videoPlayer1 {
			z-index: 1000;
		}

		#html5Video, #h264Video, #oggVideo, #webMVideo, #currentTime {
			font-family: "Segoe UI", Arial, sans-serif;
			font-size: 0.8em;
			margin-bottom: 5px !important;
		}

		#currentTime {
			margin-top: 20px;
		}

JavaScript

$(function () {
			var playing = false;
			$("#videoPlayer1").igVideoPlayer({
				sources: ["https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.mp4",
							"https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.webm",
							"https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.ogv"
				],
				width: "100%",
				posterUrl: "https://igniteui.com/images/samples/video-player/big-buck-bunny.png",
				fullscreen: false,
				browserControls: false,
				autoplay: false,
				title: 'Big Buck Bunny',
				muted: false,
				autohide: false,
				bookmarks: [
					{
						title: 'River',
						description: 'River',
						time: 13
					},
					{
						title: 'Big Buck Bunny Appears',
						description: 'Big Buck Bunny Appears',
						time: 33
					}
				]
			});

			if ($("#videoPlayer1").igVideoPlayer("supportsVideo"))
				$("#html5Video").html($("#html5Video").html() + '<span class="green">YES</span>');
			else
				$("#html5Video").html($("#html5Video").html() + '<span class="red">NO</span>');

			if ($("#videoPlayer1").igVideoPlayer("supportsH264BaselineVideo"))
				$("#h264Video").html($("#h264Video").html() + '<span class="green">YES</span>');
			else
				$("#h264Video").html($("#h264Video").html() + '<span class="red">NO</span>');

			if ($("#videoPlayer1").igVideoPlayer("supportsOggTheoraVideo"))
				$("#oggVideo").html($("#oggVideo").html() + '<span class="green">YES</span>');
			else
				$("#oggVideo").html($("#oggVideo").html() + '<span class="red">NO</span>');

			if ($("#videoPlayer1").igVideoPlayer("supportsWebmVideo"))
				$("#webMVideo").html($("#webMVideo").html() + '<span class="green">YES</span>');
			else
				$("#webMVideo").html($("#webMVideo").html() + '<span class="red">NO</span>');

			$("#videoPlayer1").igVideoPlayer().bind({
				igvideoplayerplaying: function () {
					playing = true;
					$('#btnPlay span').html("Pause");
				},
				igvideoplayerpaused:...