JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<ul id="UL_1">
	<li id="LI_2">
		 <b id="B_3">Vocabulary</b>
		<div id="DIV_4">
			<div id="DIV_5">
			</div>
		</div>
	</li>
	<li id="LI_6">
		 <b id="B_7">Pronunciation</b>
		<div id="DIV_8">
			<div id="DIV_9">
			</div>
		</div>
	</li>
	<li id="LI_10">
		 <b id="B_11">Reading</b>
		<div id="DIV_12">
			<div id="DIV_13">
			</div>
		</div>
	</li>
	<li id="LI_14">
		 <b id="B_15">Writing</b>
		<div id="DIV_16">
			<div id="DIV_17">
			</div>
		</div>
	</li>
	<li id="LI_18">
		 <b id="B_19">Listening</b>
		<div id="DIV_20">
			<div id="DIV_21">
			</div>
		</div>
	</li>
	<li id="LI_22">
		 <b id="B_23">Speaking</b>
		<div id="DIV_24">
			<div id="DIV_25">
			</div>
		</div>
	</li>
</ul>

CSS

#UL_1 {
    color: rgb(119, 119, 119);
    height: 305px;
    text-decoration: none solid rgb(119, 119, 119);
    width: 608px;
    perspective-origin: 305px 153.5px;
    transform-origin: 305px 153.5px;
    border: 1px solid rgb(229, 229, 229);
    border-radius: 2px 2px 2px 2px;
    font: normal normal normal 14px/20px Arial, sans-serif;
    list-style: none outside none;
    margin: 30px 0px 10px;
    outline: rgb(119, 119, 119) none 0px;
    padding: 0px;
}/*#UL_1*/

#LI_2 {
    color: rgb(119, 119, 119);
    text-decoration: none solid rgb(119, 119, 119);
    width: 578px;
    perspective-origin: 304px 25px;
    transform-origin: 304px 25px;
    border: 0px none rgb(119, 119, 119);
    font: normal normal normal 14px/20px Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(119, 119, 119) none 0px;
    overflow: hidden;
    padding: 15px;
}/*#LI_2*/

#B_3, #B_7, #B_11, #B_15, #B_19, #B_23 {
    color: rgb(85, 85, 85);
    display: block;
    float: left;
    height: 20px;
    text-align: right;
    text-decoration: none solid rgb(85, 85, 85);
    width: 130px;
    perspective-origin: 65px 10px;
    transform-origin: 65px 10px;
    border: 0px none rgb(85, 85, 85);
    font: normal normal bold 14px/20px Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 20px 0px 0px;
    outline: rgb(85, 85, 85) none 0px;
}/*#B_3, #B_7, #B_11, #B_15, #B_19, #B_23*/

#DIV_4, #DIV_8, #DIV_12, #DIV_16, #DIV_20, #DIV_24 {
    box-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px 1px 2px 0px inset;
    color: rgb(119, 119, 119);
    height: 10px;
    text-align: left;
    text-decoration: none solid rgb(119, 119, 119);
    width: 428px;
    perspective-origin: 214px 5px;
    transform-origin: 214px 5px;
    background: rgb(247, 247, 247) linear-gradient(rgb(245, 245, 245), rgb(249, 249, 249)) repeat-x scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(119, 119, 119);
    border-radius: 3px 3px 3px...