JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">

            <ul class="accordion1">
                <li>
                    <h2 id="first">CMT</h2>
                    <div class="content">
                        <ul class="accord">
                            <li>
                                <a href="#">main link1</a>
                                <ul>
                                    <li><a href="#">Link One</a></li>
                                    <li><a href="#">Link Two</a></li>
                                    <li><a href="#">Link Three</a></li>
                                    <li><a href="#">Link Four</a></li>
                                    <li><a href="#">Link Five</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="#">main link2</a>
                                <ul>
                                    <li><a href="#">Link One</a></li>
                                    <li><a href="#">Link Two</a></li>
                                    <li><a href="#">Link Three</a></li>
                                    <li><a href="#">Link Four</a></li>
                                    <li><a href="#">Link Five</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <h2 id="fois"><a href="#" style="text-decoration:none;color:black;">FOIS</a></h2>

                </li>
                <li>
                    <h2>ASP</h2>
                    <div class="content">
                        <ul>

                        </ul>

                    </div>
                </li>
                <li>
                    <h2>PTT</h2>
                    <div class="content">
                        content PTT
                    </div>
                </li>
            </ul>
        </div>

CSS

.wrap {
                margin-left: 0px;
                margin-top: 0px;
                width: 100px;
            }

            .accordion1 {
                width: 178px;
                margin: 0px;
                padding: 0px;
                list-style: none;
                border: 1px solid #ddd;
            }

                .accordion1 h2 {
                    font-size: 12px;
                    font-weight: bold;
                    font-family: Arial, Helvetica, sans-serif;
                    margin: 0px;
                    text-decoration: none;
                    padding: .25em .25em .25em 2em;
                    color: #333;
                    background: url('compo_images/gradient_v_gray.gif') repeat-x;
                    background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
                    border-bottom: 1px solid #ddd;
                    cursor: pointer;
                }

                    .accordion1 h2:hover {
                        background: url('compo_images/gradient_v_orange.gif') repeat-x;
                        color: white;
                    }

                .accordion1 li div.content {
                    padding: 3px;
                    background: #fcfbfb;
                    border-bottom: 1px solid #ddd;
                    /*border: 1px solid #ddd;*/
                }

                .accordion1 li:hover h2 a {
                    color: white !important;
                    background-image: url("./compo_images/arrow_exp_n.gif");
                    background: url('compo_images/gradient_v_orange.gif') repeat-x;
                }

            .accord > li {
                padding: 0;
                list-style-type: none;
            }

                .accord > li > a {
                    text-decoration: none;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    padding-left: 12px;
                    color:...