JSFiddle - React, Tailwind, and code Playground

by Dereck Jones

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table id='table_scroll'>
<section id="section">

<div class='container'>
    <div class='clientname-text'>Client 1</div>
    <div class='roomname-text'>Room 1</div>
    <div class='time-text'>08:00 - 17:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 2</div>
    <div class='roomname-text'>Room 2</div>
    <div class='time-text'>09:00 - 16:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 3</div>
    <div class='roomname-text'>Room 3</div>
    <div class='time-text'>09:00 - 18:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 4</div>
    <div class='roomname-text'>Room 4</div>
    <div class='time-text'>07:00 - 23:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 5</div>
    <div class='roomname-text'>Room 5</div>
    <div class='time-text'>09:00 - 15:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 6</div>
    <div class='roomname-text'>Room 6</div>
    <div class='time-text'>08:00 - 19:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 7</div>
    <div class='roomname-text'>Room 7</div>
    <div class='time-text'>09:00 - 15:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 8</div>
    <div class='roomname-text'>Room 8</div>
    <div class='time-text'>09:00 - 18:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 9</div>
    <div class='roomname-text'>Room 9</div>
    <div class='time-text'>08:00 - 18:00</div>
</div>
  

<div class='container'>
    <div class='clientname-text'>Client 10</div>
    <div class='roomname-text'>Room 10</div>
    <div class='time-text'>08:00 - 18:00</div>
</div>

</section>
</table>

CSS

.container {
	display: flex;
	border-top-style: none;
	border-bottom-style: solid;
	border-right-style: none;
	border-left-style: none;
	border-bottom-width: 2px;
	border-bottom-color: #FFF;
	max-height: 100px;
}
.clientimage {
	padding-left: 20px;
	align-items: center;
	width: 150px;
	float: left;
	display: flex;
}

.clientname-text {
	font-family: stnzq;
	font-size: 2.3vw;
	color: #000;
	align-items: center;
	float: left;
	margin-left: 25px;
	width: 100px;
}


.roomname-text {
	font-family: stnzq;
	font-size: 2.3vw;
	color: #000;
	padding-bottom: 18px;	
	align-items: center;
	white-space: nowrap;
	float: left;
	width: 200px;
}


.time-text {
	font-family: stnzq;
	font-size: 2.3vw;
	color: #000;
	float: left;
	align-items: center;
	white-space: nowrap;

}

JavaScript

$.fn.infiniteScrollUp=function(){
    var self=this,conf=self.children()
    setInterval(function(){
    	conf.slice(10).hide();
		conf.filter(':hidden').eq(0).slideDown()
		conf.eq(0).slideUp(6000, "linear",function(){
        	$(this).appendTo(self);
        conf=self.children();
      });
    },100)
	return this;
}
	

$(function(){
	$('section').infiniteScrollUp()
})