JSFiddle - React, Tailwind, and code Playground

by Scott Hamm

HTML

<base target="iframe_a">
<div id="main">
	<div id="Header">
		<h1>ASL That!</h1>
	</div><!-- Header -->
	<div id="menu">
	<ol type=I>
	<li>Deaf Accents</li>
		<ol type=a>
			<li><a href="DATA/0W0A4965.MOV">Soon</a></li>
			<li><a href="DATA/0W0A4966.MOV">Gulp</a></li>
			<li><a href="DATA/0W0A4967.MOV">Early</a></li>
			<li><a href="DATA/0W0A4968.MOV">Dangerous</a></li>
			<li><a href="DATA/0W0A4969.MOV">Can't</a></li>
			<li><a href="DATA/0W0A4970A.MOV">Watch</a></li>
			<li><a href="DATA/0W0A4971.MOV">Remember</a></li>
		</ol>
	<li>ASL Idioms</li>
		<ol type=i>
		<li>The Finish idiom, part 1</li>
			<ol type=1>
				<li><a href="DATA/0W0A4972.MOV">Eat, finish, you?</a></li>
				<li><a href="DATA/0W0A4973.MOV">Eat see you?</a></li>
				<li><a href="DATA/0W0A4974.MOV">See finish, me</a></li>
				<li><a href="DATA/0W0A4975.MOV">Bother, go away</a></li>
				<li><a href="DATA/0W0A4976.MOV">Laugh at me, finish!</a></li>
				<li><a href="DATA/0W0A4977.MOV">Play, play, finish!</a></li>
				<li><a href="DATA/0W0A4978.MOV">Heard finish before me</a></li>
				<li><a href="DATA/0W0A4979.MOV">Heard finish before, you?</a></li>
				<li><a href="DATA/0W0A4980.MOV">Me finish!</a></li>
				<li><a href="DATA/0W0A4981.MOV">Me finish!!!</a></li>
				<li><a href="DATA/0W0A4982.MOV">Apply finish, me</a></li>
				<li><a href="DATA/0W0A4983.MOV">Time finish!</a></li>
				<li><a href="DATA/0W0A4984.MOV">(object) all gone finish!</a></li>
				<li><a href="DATA/0W0A4985.MOV">(He, it, etc) gone finish! (zoom) (whew!)</a></li>
				<li><a href="DATA/0W0A4986.MOV">You-me race; me gone (zoom) finish!</a></li>
				<li><a href="DATA/0W0A4987.MOV">Train gone (zoom) finish, sorry!</a></li>
				<li><a href="DATA/0W0A4988.MOV">School finish, zoom, me!</a></li>
			</ol>
		<li>The Finish idiom, part 2</li>
			<ol type 1>
				<li><a href="DATA/0W0A4989.MOV">Once, finish. Again not have to!</a></li>
				<li><a href="DATA/0W0A4990.MOV">Pay off (loan) yesterday, finish me</a></li>
				<li><a...

CSS

h1 {
	text-align:center;	
	letter-spacing:5px;
}
div#menu {
	border:1px solid #000;
	float:left;
	padding-right:20px;
}

div#video {
	float:left;
	position:fixed;
	bottom:10%;
	right:40px;
	margin:0;
	padding:0;
}