JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="accordion"> <!-- main container of the accordion -->
    <li>
        <h2>Content1</h2> <!-- Heading1 of accordion on hover of which hidden text is shown -->
        <div class="text"> <!-- Text which will be displayed on hover of Heading1 -->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
    <li>
        <h2>Content2</h2><!-- Heading2 of accordion on hover of which hidden text is shown -->
        <div class="text"><!-- Text which will be displayed on hover of Heading2 -->
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
    <li>
        <h2>Content3</h2><!-- Heading3 of accordion on hover of which hidden text is shown -->
        <div class="text"><!-- Text which will be displayed on hover of Heading3 -->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
    <li>
        <h2>Content4</h2><!-- Heading4 of accordion on hover of which hidden text is shown -->
        <div class="text"><!-- Text which will be displayed on hover of Heading4 -->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
</ul>

CSS

#accordion{ /*Width of the main container of accordion*/
    width: 600px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#accordion h2{ /*Styling the heading of the content*/
    font-size: 15px;
    margin: 0px;
    padding: 10px;
    background: #33001a;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #fff;
}
#accordion li div.text{ /*Styling the content which is shown on hover of heading, initially it's display is none*/
    display: none;
    padding: 10px;
    background: #ffcce6;
    color: #000;
    border: 1px solid #ddd;
}
#accordion li:hover div.text{ /*On hover of heading, the content is shown*/
    display: block;
}