JSFiddle - React, Tailwind, and code Playground

HTML

<a id="servicios"></a>
    <a id="one"></a>
    <a id="two"></a>
    <header class="nav">
        <nav>
            <ul>
                <li><a href="#one"> 1 </a> </li>
                <li><a href="#two"> 2 </a> </li>
            </ul>
        </nav>
    </header>

    <section id="main">
        <article class="panel" id="one">
            <h1> A bit of text here</h1>
        </article>

        <article class="panel" id="two">
            <h1> More here :-)</h1>
        </article>
    </section>

CSS

.panel {
    width: 100%;
    height: 200px;
    z-index:0;
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
}

a[ id= "one" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[ id= "two" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -200px );
    transform: translateY( -200px );
}