JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<h1>CSS3 Transition - Accordion sample</h1>

        <section>
        <article id="ave">
            <h2><a href="#ave">Ave verum</a></h2>
            <p>Ave verum corpus, natum de Maria Virgine, vere passum, immolatum in cruce pro homine,
            cuius latus perforatum unda fluxit et sanguine: esto nobis praegustatum in mortis examine.</p>
        </article>

        <article id="gaudeamus">
            <h2><a href="#gaudeamus">Gaudeamus</a></h2>
            <p>Gaudeamus igitur, Juvenes dum sumus!
            Post jucundam juventutem, Post molestam senectutem, Nos habebit humus!</p>
        </article>

        <article id="odi">
            <h2><a href="#odi">Odi et amo</a></h2>
            <p>Quare id faciam, fortasse requiris. Nescio, sed fieri sentio et excrucior.</p>
        </article>
        </section>

CSS

section{
    positon:relative;
    width:100%;
    height:100%;
}
h2 {
                margin: 0;
                padding: 0;
                font-size: 100%;
            }

            h2 a {
                color: #030;
                background-color: #cec;
                display: block;
                text-align: center;
                width: 50px;
                height: 100%;
                position: absolute;
                text-decoration: none;
                -webkit-transform: translate(-50px,50px) rotate(-90deg);
                -moz-transform: translate(-50px,50px) rotate(-90deg);
                -ms-transform: translate(-50px,50px) rotate(-90deg);
                -o-transform: translate(-50px,50px) rotate(-90deg);
                transform: translate(-50px,50px) rotate(-90deg);
            }

            div:target h2 a {
                color: #efd;
                background-color: #090;
            }

            h2 a:hover {
                color: #fff;
                background-color: #060;
            }

            article{
                background-color: #dfd;
                -webkit-transition: background-color 1s, width 1s;
                   -moz-transition: background-color 1s, width 1s;
                    -ms-transition: background-color 1s, width 1s;
                     -o-transition: background-color 1s, width 1s;
                        transition: background-color 1s, width 1s;
                margin: 0;
                padding: 0;
                border-top: 1px solid white;
                width: 100%;
                height: 100%;
                overflow: hidden;
                float: left;
            }

            div:target {
                background-color: #9f3;
                width: 400px;
            }

            div p {
                margin: 0;
                width: 100%;
                color: #678;
                -webkit-transition: color 1s;
                   -moz-transition: color 1s;
          ...