JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
		<section class="scheduler-area">
			<div class="scheduler-container">
			<div class="ghost-select">
			<span></span>
			<button class="close-button" />
			</div>
				<table class="scheduler">
					<thead>
						<tr>
							<th class="header">
								<div class="header-name">A</div>
							</th>
							<th class="header">
								<div class="header-name">B</div>
							</th>
							<th class="header">
								<div class="header-name">C</div>
							</th>
							<th class="header">
								<div class="header-name">D</div>
							</th>
							<th class="header">
								<div class="header-name">E</div>
							</th>
							<th class="header">
								<div class="header-name">F</div>
							</th>
							<th class="header">
								<div class="header-name">G</div>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
						</tr>
						<tr>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
						</tr>
						<tr>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
						</tr>
						<tr>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
						</tr>
						<tr>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td class="item"></td>
							<td...

CSS

/* Table Styles */
.scheduler-area  {
	position: relative;
	border: 1px solid #000;
	padding-top: 37px;
	background: #777777;
	overflow: hidden;
}

.scheduler-container {
  overflow-y: auto;
  height: 355px;
  background-image: linear-gradient(to bottom,#BCBCBC 0%, #CECCCC 100%);
}
.scheduler {
	border-spacing: 0;
	width: 100%;
	background-image: linear-gradient(0deg, transparent 0%, transparent 9px, rgba(255, 255,
		255, 0.2) 9px, rgba(255, 255, 255, 0.2) 10px, transparent 10px,
		transparent 19px, rgba(255, 255, 255, 0.1) 19px,
		rgba(255, 255, 255, 0.1) 20px, transparent 20px, transparent 29px,
		rgba(255, 255, 255, 0.1) 29px, rgba(255, 255, 255, 0.1) 30px,
		transparent 30px, transparent 39px, rgba(255, 255, 255, 0.1) 39px,
		rgba(255, 255, 255, 0.1) 40px, transparent 40px, transparent 49px,
		rgba(255, 255, 255, 0.1) 49px, rgba(255, 255, 255, 0.1) 50px),
		linear-gradient(-90deg, transparent 0%, transparent 9px, rgba(255, 255,
		255, 0.2) 9px, rgba(255, 255, 255, 0.2) 10px, transparent 10px,
		transparent 19px, rgba(255, 255, 255, 0.1) 19px,
		rgba(255, 255, 255, 0.1) 20px, transparent 20px, transparent 29px,
		rgba(255, 255, 255, 0.1) 29px, rgba(255, 255, 255, 0.1) 30px,
		transparent 30px, transparent 39px, rgba(255, 255, 255, 0.1) 39px,
		rgba(255, 255, 255, 0.1) 40px, transparent 40px, transparent 49px,
		rgba(255, 255, 255, 0.1) 49px, rgba(255, 255, 255, 0.1) 50px);
	background-size: 50px 50px;
}

.scheduler .item + .item {
  border-left:1px solid #777777;
}
.scheduler .item, .header {
  border-bottom:1px solid #777777;
 /*  background: #F7F7F7; */
  color: #000;
  padding: 25px;
}
.scheduler .header {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
  border-left: 1px solid #777777;
  border-bottom: none;
}

.scheduler .header:FIRST-CHILD {
  border-left: none;
}
.scheduler .header .header-name{
  position: absolute;
  background: transparent;
  color: #fff;
  padding:...

JavaScript

var currentRow,currentColumn,section,initialHeight,rowCount;
var timer;
var delay = 1000;
var intTopHandler= null;
var intBottomHandler= null;
var distance = 70;
var scrollTimer = 100;
var step = 25;
var isMouseDown = false;
var originPosition;
jQuery(document).ready(function() {
	rowCount = jQuery(".scheduler tr").length;
	$(".header-name , .item").attr('unselectable', 'on').css({
		'-moz-user-select' : '-moz-none',
		'-moz-user-select' : 'none',
		'-o-user-select' : 'none',
		'-khtml-user-select' : 'none',
		'-webkit-user-select' : 'none',
		'-ms-user-select' : 'none',
		'user-select' : 'none'
	}).bind('selectstart', function() {
		return false;
	});
	jQuery(".scheduler .item").mouseover(function(e) {
		if(!isMouseDown) {
			currentRow = jQuery(this).closest("tr").index()+1;
			currentColumn = jQuery(this).index()+1;
		}
	});
	jQuery(".scheduler .item").click(function(e) {
		if(!hasAttribute(jQuery(this),"section")) {
			jQuery(this).attr("section",section);
			jQuery(this).addClass("item-selected");
			currentRow = jQuery(this).closest("tr").index()+1;
			currentColumn = jQuery(this).index()+1;
		}
	});
   	jQuery(".ghost-select").mouseleave(function(){
		if(!isMouseDown) {
	   	    jQuery(".ghost-select").removeClass("ghost-active");
	   	    jQuery(".close-button").removeClass("close-button-active");
	   	    jQuery(".ghost-select").width(0).height(0);
		}
   	});
	jQuery(".scheduler .item").hover(function(e) {
		if(!isMouseDown && jQuery(this).hasClass("item-selected")) {
			timer = setTimeout(function() {
				var element = getCurrentElement();
				var section = jQuery(element).attr("section");
				var firstElement =jQuery(".scheduler .item[section='"+section+"']:first");	
				var lastElement =jQuery(".scheduler .item[section='"+section+"']:last");
			    var itemCount = jQuery(".scheduler .item[section='"+section+"']").length;
			    var left = jQuery(firstElement).offset().left-8;
			    var top = jQuery(firstElement).offset().top-8;
			    var height =...