JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="accordion">
            <section id="one">
                <h1><a href="#one"><span>1</span>Where I can find information, where I can find information?</a></h1>
                <div>
                    <p>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды.</p>
                </div>
            </section>


            <section id="two">
                <h1><a href="#two"><span>2</span>Where I can find information, where I can find information?</a></h1>
                <div>
                    <p>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды.</p>
                </div>
            </section>

            <section id="three">
                <h1><a href="#three"><span>3</span>Where I can find information, where I can find information?</a></h1>
                <div>
                    <p>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды.</p>
                </div>
            </section>

            <section id="four">
                <h1><a href="#four"><span>4</span>Where I can find information, where I can find information?</a></h1>
                <div>
                    <p>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного...

CSS

section
{
    display: block;
}
.accordion{
    background-color: #E8EDE3;
    border: 2px solid #539127;
    width: 600px;
    padding: 10px;
    margin: 0 auto;
}
.accordion h1, .accordion p{
    margin: 0;
}
.accordion p{
    padding: 5px;
}
.accordion h1 a{
    display: block;
    position: relative;
    font: 14px;
    padding: 8px;
    color: #333;
    text-decoration: none;
}
.accordion h1 a:hover {
    background: #EEEEFF;
}
.accordion h1 + div {
    height: 0;
    overflow: hidden;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
.accordion :target h1 a:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 0%;
    margin-top: -3px;
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.accordion :target h1 + div {
    height: 200px;
}