JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tituloseccion">
        Titleone
    </div>
    <hr align="left" width="90%" size="0.1em" color="#999999">
    <div id="headtwo">titletwo</div>
    <div id="bigcontainer" style="display:block;">
        <div id="headthree">titlethree</div>
        <div id="generalcont" style="display:block;">
            <div id="container" style="display:block;">
                <div style="display:inline">parrone&nbsp;&nbsp;&nbsp;</div>
                <div style="display:inline;">
                    <a href="javascript:show('info1','text1');" id="text1">show datails...</a>
                </div>
            </div>
            <div  id="info1" style="display:none;" >
                text text text text text text text text 
            </div>
         </div>

        <div id="generalcont" style="display:block;">
            <div id="container" style="display:block;">
                <div style="display:inline">parrtwo&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div style="display:inline;">
                    <a href="javascript:show('info2','text2');" id="text2">show details...</a>
                </div>
            </div>
            <div  id="info2" style="display:none;" >
                text text text text text text text 
            </div>
        </div>
    </div>
    <div id="letrapequena" style="display:block;">
                text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text...

CSS

body{
            background-color:transparent;
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.0em;
            font-style: normal;
            color:#999999;
            margin:10px;
        }
        body a{
            color:#0CF;
            text-decoration:none;
        }
        #bg {
            z-index: -14;
            width: 100%;
        }
        #letrapequena {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 0.6em;
            color: #00537c;
        }
        #tituloseccion{
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.5em;
            font-style: normal;
            font-weight: bold;
            color:#7AB800;
        }
        #headtwo{
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.2em;
            font-style: normal;
            font-weight: bold;
            color:#7AB800;
        }
        #headthree{
            font-size: 1.1em;
            font-style: normal;
            font-weight:bold;
            color:#00537C;
        }
        #container{
            background-color:#D8F7FE;
            margin:10px 0;
            color:#00537c;
            font-weight:bold;
        }

JavaScript

function show(divactual, textactual) {
    if (document.getElementById(divactual).style.display == "block") {
        document.getElementById(divactual).style.display = "none";
        document.getElementById(textactual).innerHTML = "show details...";

    }
    else if (document.getElementById(divactual).style.display == "none") {
        document.getElementById(divactual).style.display = "block";
        document.getElementById(textactual).innerHTML = "hidden details...";
    }
}