JSFiddle - React, Tailwind, and code Playground

HTML

<body><div class="ui-rangeSlider ui-rangeSlider-noArrow ui-dateRangeSlider" style="position: relative;" id="dateslider"><div style="position: absolute; width: 860px;" class="ui-rangeSlider-container"><div style="position: absolute; top: 0px; left: 0px; width: 860px;" class="ui-rangeSlider-innerBar"><div class="ui-rangeSlider-ruler ui-ruler"><div class="ui-ruler-scale ui-ruler-scale0"><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.33331%; margin-left: 0.71295%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.37775%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick isyear" style="display: inline-block; width: 1.37775%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label">2012</span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.28887%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.3759%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.33331%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.37775%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.33331%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.37775%;"><div class="ui-ruler-tick-inner"><span class="ui-ruler-tick-label"></span></div></div><div class="ui-ruler-tick tiny" style="display: inline-block; width: 1.37775%;"><div...

CSS

html, body {
    background: #555;
}

    .ui-ruler-scale0 {
        border: 1px solid orange;
    }
				
				.ui-ruler-tick-label {
					font-size: 10px;
					color: rgba(255,255,255,1);
					padding-left: 4px;
					vertical-align: baseline;
				}
				.ui-ruler-tick.isyear .ui-ruler-tick-label {
					font-size: 10px;
					font-weight: bold;
					color: rgba(255,255,255,0.85);
					opacity: 1;
				}
				
				.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label {
					position: absolute;
					bottom: 0px;
				}
				
				.ui-ruler-tick.isyear .ui-ruler-tick-inner {
					/* 	border-left: 1px solid rgba(255,255,255,0.75); */
					outline: 1px solid rgba(255,255,255,0.75);
					opacity: 1;
				}
				
				/*
				.ui-ruler-tick.isyear .ui-ruler-tick-inner:before {
					content: "\a0";
					display: block;
					padding: 0px 0;
					line-height: 36px;
					border-left: 1px solid #000; 
				}
				*/
				
				.ui-ruler-tick.hidden .ui-ruler-tick-inner {
					display: none;
				}
				.ui-ruler-tick.tiny .ui-ruler-tick-inner {
					/*border-left: 1px solid rgba(255,255,255,0.15); */
					background: url(../img/border.png) repeat-y;
					opacity: 0.25;
				}
				
				.ui-ruler-tick-inner {
					/*border-left: 1px solid rgba(255,255,255,0.32); */
					outline: 1px solid rgba(255,255,255,0.25);
					background: url(../img/border.png) repeat-y;
					height: 36px;
					opacity: 0.6;
				}
				
				#handle, #dateslider .ui-rangeSlider-bar {
					height: 18px;
					width: 200px;
					border-radius: 0px;
					background: rgba(255,255,255,0.2);
					position: relative;
					left: 236px;
					top: 9px;
					opacity: 0.7;
					cursor: pointer;
				}
				
				#dateslider .ui-rangeSlider-bar {
					opacity: 1;
					background: rgba(255,255,255,0.2);
				}
				
				#dateslider .ui-rangeSlider-bar, .ui-rangeSlider-ruler, .ui-ruler-scale {
					height: 36px;
				}
				.ui-rangeSlider-withArrows .ui-rangeSlider-container {
					margin: 0px 15px;
				}
				
				.ui-rangeSlider-leftArrow,...