JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Html" class="Header" onclick="showDescription(this)">
        1.Html
    </div>
    <div id="HtmlDescription" class="Description">
        HyperText Markup Language (HTML) is the main markup language for web pages. HTML
        elements are the basic building-blocks of webpages. HTML is written in the form
        of HTML elements consisting of tags enclosed in angle brackets (like
        &lt;html&gt;
        ), within the web page content. HTML tags most commonly come in pairs like &lt;h1&gt;
        and &lt;h1/&gt;, although some tags, known as empty elements, are unpaired, for
        example &lt;img&gt;. The first tag in a pair is the start tag, the second tag is
        the end tag (they are also called opening tags and closing tags). In between these
        tags web designers can add text, tags, comments and other types of text-based content.
    </div>
    <div id="Css" class="Header" onclick="showDescription(this)">
        2.Css
    </div>
    <div id="CssDescription" class="Description">
        Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
        semantics (the look and formatting) of a document written in a markup language.
        Its most common application is to style web pages written in HTML and XHTML, but
        the language can also be applied to any kind of XML document, including plain XML,
        SVG and XUL.
    </div>
    <div id="Jquery" class="Header" onclick="showDescription(this)">
        3.JQuery
    </div>
    <div id="JqueryDescription" class="Description">
        jQuery is a cross-browser JavaScript library designed to simplify the client-side
        scripting of HTML.[1] It was released in January 2006 at BarCamp NYC by John Resig.
        Used by over 52% of the 10,000 most visited websites, jQuery is the most popular
        JavaScript library in use today.
    </div>
    <div id="Ajax" class="Header" onclick="showDescription(this)">
        4.Ajax
    </div>
   ...

CSS

.Header
{
    width:600px;
    height:30px;
    text-align:left;
    font-size:larger;
    font-style:normal;
    font-family:@Arial Unicode MS;
    font-weight:bold;
    background-color:#0033AA;
    color:White;
    border:thin solid green;
    margin-top:2px;    
}
.Description
{
    width:600px;
    height:150px;
    border:thin solid gray;
    color:Black;
    background-color:Silver;
    display:none;
}

JavaScript

$(document).ready(function () {
            $("#Html").click(function () {
                $("#HtmlDescription").slideToggle("slow");
            });
            $("#Css").click(function () {
                $("#CssDescription").slideToggle("slow");
            });
            $("#Jquery").click(function () {
                $("#JqueryDescription").slideToggle("slow");
            });
            $("#Ajax").click(function () {
                $("#AjaxDescription").slideToggle("slow");
            });
        });