JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>vacabulary</title>
	<link rel="stylesheet" href="index.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
	<div id="main_container">
		<table id=outer_container>
			<tr>
				<td>
					<div>
					<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
				</div>
				</td>()
				
				<td>
					<div id="tabs_container">
						<div id=inner_wrap>
							<div>
								geisha ch 1
							</div>
							<div>
								geisha ch 2
							</div>
							<div>
								geisha ch 3
							</div>
							<div>
								work
							</div>
							<div>
								hobby
							</div>
							<div>
								music
							</div>
							<div>
								movie
							</div>
							<div>
								book1
							</div>
							<div>
								book2
							</div>
							<div>
								game
							</div>

						</div>
						<div id=icon_tab>
							<i class=" fa fa-plus-circle "aria-hidden="true"></i> 
						</div>
					</div>
				</td>
			<td>
				<div>
						<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
				</div>
			</td>
			</tr>
		</table>	
	</div>
	<script src="main.js"></script>
</body>
</html>

CSS

body{
	height:100vh;
	width:100%;
	margin: 0;
}

#main_container{
	background-color: #3f51b5;
	height:100%;
}
#outer_container{
	margin: auto;
}
#tabs_container{
	display: flex;
    overflow-x: auto;
   
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 10px;
    width: 60vh;
    height: 70px;
    border: 2px solid black;
    border-bottom: 0;
    border-radius: 10px;
    padding: 4px;
}
#inner_wrap{
	display: flex;
    border-bottom: 2px solid black;
    height: 50px;
}
#inner_wrap div{
   text-align: center;
   background-color: gray;
   padding: 10px;
   height: 20px;
   border-radius: 5px;
   margin: 2px;
   width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
		margin-top: 20px;
		width: 20px;
		padding: 20px;
        -webkit-box-shadow: 
        inset 0 0 30px rgba(0, 0, 0, 0);
        border-radius: 10px;
        background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
        background-color: #666666;
}
#icon_tab{
	display: inline-block;
	background-color: none;
	border:0;
	color:white;
	float: right;
	width: 20px;
	margin:5px;
}
.arrow{
	font-size: 34px;
	margin: 15px;
	transition: color 0.4s;
}

JavaScript

const arrowLeft = document.getElementsByClassName('arrow')[0];
const arrowRight = document.getElementsByClassName('arrow')[1];

function clickLeft(){
	arrowLeft.style.color="white";
	setTimeout(function(){
		arrowLeft.style.color="black";
	},420);
}
function clickRight(){
		arrowRight.style.color="white";
	setTimeout(function(){
		arrowRight.style.color="black";
	},420);
}