JSFiddle - React, Tailwind, and code Playground

by nilgundag

HTML

<div id="wrap">

    <ul id="accordion1">
        <li>
            <h2 id="first">CMT</h2>
            <div class="content">
                <ul id="accord">
                    <li>
                        <a href="#">HISTORY</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="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</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>FOIS</h2>
            <div class="content">
                Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
            </div>
        </li>
        <li>
            <h2>ASP</h2>
            <div class="content">
                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
            </div>
        </li>
        <li>
            <h2>PTT</h2>
            <div class="content">
                Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla...

CSS

p {
    font-family: Helvetica;
    font-size: 9pt;
}

font {
    font-family: Helvetica;
    font-size: 9pt;
}

h1 {
    font-family: Helvetica;
    color: 000066;
    font-size: 16pt;
}

h2 {
    font-family: Helvetica;
    color: D07E04;
    font-size: 15pt;
}

h3 {
    font-family: Helvetica;
    color: B08C11;
    font-size: 14pt;
}

h4 {
    font-family: Helvetica;
    color: black;
    font-size: 14pt;
}

h5 {
    font-family: Helvetica;
    color: black;
    font-size: 12pt;
}

h6 {
    font-family: Helvetica;
    color: black;
    font-size: 11pt;
}

h7 {
    font-family: Helvetica;
    color: FF6500;
    font-size: 8pt;
}

td {
    font-family: Helvetica;
    font-size: 9pt;
    color: 000000;
}

    td.header {
        font-family: Helvetica;
        font-size: 9pt;
        color: 000000;
        background-color: FF6500;
    }

    td.error {
        font-family: Helvetica;
        font-size: 9pt;
        color: FF0033;
        background-color: FFFFCC;
    }

th {
    font-family: Helvetica;
    color: #000000;
    background-color: #e6e6e6;
    font-size: 10pt;
    border: 1px solid #999999;
    padding: 5px;
}

table {
    border: 0.5px;
}

ol {
    font-family: Helvetica;
    font-size: 9pt;
}

ul {
    font-family: Helvetica;
    font-size: 9pt;
}

li {
    font-family: Helvetica;
    font-size: 9pt;
}

dl {
    font-family: Helvetica;
    font-size: 9pt;
}

dt {
    font-family: Helvetica;
    font-size: 9pt;
}

dd {
    font-family: Helvetica;
    font-size: 9pt;
    font-style: italic;
}


a:link {
    font-family: Helvetica;
    color: FF6500;
    text-decoration: none;
}

a:visited {
    font-family: Helvetica;
    color: FF6500;
    text-decoration: none;
}

a:active {
    font-family: Helvetica;
    color: FF6500;
    text-decoration: none;
}

a:hover {
    font-family: Helvetica;
    color: FF6500;
    text-decoration: none;
}

a.sub:link {
    font-family: Helvetica;
    color: 006699;
}

a.sub:visited {
    font-family: Helvetica;
   ...