JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title"><!-- left -->
  <div class="title_txt">CATEGORY</div><!-- title_txt -->
</div><!-- title -->
<div style=" border-top: 3px solid #000; width:210px;"></div>
<div id="content"><a name="ex1" id="ex1"></a>
    <ul id="example1">
        <li><a href="#">最新商品</a>
            <ul>
                <li><a href="https://www.facebook.com/">8/18 東京著衣-韓系</a></li>
                <li><a href="http://www.tokichoi.com.tw/">8/18 MAYUKI新品</a></li>
                <li><a href="index.php?id=2c#ex1">8/14 東京著衣-日系</a></li>
                <li><a href="index.php?id=2d#ex1">8/14 YOCO新品</a></li>
                <li><a href="index.php?id=2e#ex1">東京日系-8月新品</a></li>
            </ul>
        </li>
        <li><a href="#">出清5折起</a>
            <ul>
                <li><a href="index.php?id=5a#ex1">Subitem 5a</a></li>
                <li><a href="index.php?id=5b#ex1">Subitem 5b</a></li>
                <li><a href="index.php?id=5c#ex1">Subitem 5c</a></li>
            </ul>
        </li>
        <li><a href="#">暢銷推薦</a>
            <ul>
                <li><a href="index.php?id=7a#ex1">Subitem 7a</a></li>
                <li><a href="index.php?id=7b#ex1">Subitem 7b</a></li>
                <li><a href="index.php?id=7c#ex1">Subitem 7c</a></li>
                <li><a href="index.php?id=7d#ex1">Subitem 7d</a></li>
            </ul>
        </li>
        <li><a href="#">主題特輯</a>
            <ul>
                <li><a href="index.php?id=8a#ex1">Subitem 8a</a></li>
                <li><a href="index.php?id=8b#ex1">Subitem 8b</a></li>
                <li><a href="index.php?id=8c#ex1">Subitem 8c</a></li>
                <li><a href="index.php?id=8d#ex1">Subitem 8d</a></li>
                <li><a href="index.php?id=8e#ex1">Subitem 8e</a></li>
                <li><a href="index.php?id=8f#ex1">Subitem 8f</a></li>
            </ul>
        </li>
        <li><a href="#">上　衣</a>
            <ul>
                <li><a href="index.php?id=9a#ex1">Subitem 9a</a></li>
                <li><a...

CSS

body {
	font-family: Meiryo,Verdana, Geneva, sans-serif, "微軟正黑體";
}
        /* Styles for Example #1 */
        #example1 {
            margin: 0;
            padding: 0;
            width: 100%;
            list-style-type: none;
			font-size:12px;
        }

        #example1 .closed {
            background-image: url(img/ha-down.gif);
        }

        #example1 .closed, #example1 .opened {
            padding-right: 10px;
            background-position: 98% 50%;
            background-repeat: no-repeat;
			height:33px;/* 標題高度 */
			padding-top:17px;
        }

        #example1 .header {
            background-color: #fff;/* 標題背景色 */
            color: #000;
			padding-left:30px;/* 標題內縮距離 */
        }

        #example1 .opened {
            background-image: url(img/ha-up.gif);
        }

        #example1 a {
            display: block;
            text-decoration: none;
        }

        #example1 a.hover {
            background-color: #fff;/* 標題背景色 */
            color: #000;
        }

        #example1 ul {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #example1 li a {
            padding: 2px 10px 2px 4px;
            border-top: 1px solid #d5d5d5;
			border-left: 0px solid #d5d5d5;
			border-right: 0px solid #d5d5d5;
            background-color: #e5e5e5;
            color: #FFFFFF;
        }
        #example1 li li a {
            border-top: 1px solid #d5d5d5;
            background-color: #e5e5e5;
            color: #000;
			padding-left:50px;/* 子項內縮距離 */
			height:28px;/* 子項高度 */
			padding-top:10px;
        }
		#example1 li li a.hover {
            border-top: 1px solid #d5d5d5;
            background-color: #e5e5e5;
            color: #000;
			padding-left:50px;/* 子項內縮距離 */
			height:28px;/* 子項高度 */
			padding-top:10px;
        }		
		.title {
			height:40px;
            border: 0px solid #d5d5d5;
			padding:20px 0px 0 20px;
			width:190px;
		}
		.title_txt...