JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>VOD</title>
	</head>
	<body>
		<video id='vid' src='textMotion.mp4' autoplay loop></video>
		<div id='mid' class='hidden'>
  			<div id='mid1'>
    			<h1>TEXT</h1>
  			</div>
  			<div id='mid2'>
  				<ul id='ulid'></ul>
  			</div>
		</div>
	</body>
</html>

CSS

html, body {
				height:100%
			}

			#mid {
  				display: flex;
  				height: 100%;
  				width: 100%;
  				justify-content: stretch;
  				flex-flow: row nowrap;
  				z-index: 2;
			}

			#mid.hidden {
				display: none;
			}

			#mid1, #mid2 {
				display: flex;
  				flex: 1;
  				align-items: center;
			}

			#mid1 {
				justify-content: center;
				background-color: rgba(255, 255, 255, 0.5);
			}

			#mid2 {
				background-color: rgba(255, 255, 255, 0.6);
			}

			#ulid {
				list-style-type: none;
				width: 100%;
				margin: 0;
  				border: 0;
  				padding: 0;
			}
			
			.list-item {
				width: 100%;
				height: 150px;
				border-style: solid;
				border-width: 1px;
  				display:flex;
  				align-items: center;
  				justify-content: flex-start;
			}
			
			li:focus, li:active {
    			background-color: green;
			}

JavaScript

function displayMenu() {
	var mid = document.getElementById('mid');
	
	if(mid.classList.contains('hidden') == false) {
		mid.classList.toggle("hidden");
		let ulid = document.getElementById('ulid');
		while(ulid.firstChild) {
			ulid.removeChild(ulid.firstChild);
		}
		return;
	}

	var ulid = document.getElementById('ulid');
	
	for(let index = 0; index < 3; index ++) {
		let lItem = document.createElement('li');
		lItem.classList.add('list-item');
		lItem.setAttribute('id', 'li' + index);

 		var lineBreak = document.createElement('br');

		lItem.appendChild(document.createTextNode('TEXT'));
		lItem.appendChild(lineBreak);
		lItem.appendChild(document.createTextNode('TEXT'));
		ulid.appendChild(lItem);
	}

	mid.classList.toggle("hidden");
	document.getElementById('li0').focus();
}

function changeChannel(e) {
	console.log('received keyEvent : ' + e.keyCode);
	let keyCode = e.keyCode;

	if(keyCode == 77) {
		displayMenu();
	}
}

document.addEventListener('keydown', changeChannel);