JSFiddle - React, Tailwind, and code Playground

by psayre23

HTML

<section id="home">
    <article>
        <h1>Home</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#page1">Page 1</a>
            <a href="#page2">Page 2</a>
            <a href="#page3">Page 3</a>
        </nav>
    </article>
</section>

<section id="page1">
    <article>
        <h1>Page 1</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#page1">Page 1</a>
            <a href="#page2">Page 2</a>
            <a href="#page3">Page 3</a>
        </nav>
    </article>
</section>

<section id="page2">
    <article>
        <h1>Page 2</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#page1">Page 1</a>
            <a href="#page2">Page 2</a>
            <a href="#page3">Page 3</a>
        </nav>
    </article>
</section>

<section id="page3">
    <article>
        <h1>Page 3</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#page1">Page 1</a>
            <a href="#page2">Page 2</a>
            <a href="#page3">Page 3</a>
        </nav>
    </article>
</section>

CSS

body {
    width: 100%;
    margin: 0;
    position: relative;
}

section {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    
    -webkit-transition: z-index 1s ease;
    z-index: 1;
}

section:target {
    z-index: 100;
}

section > article {
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transform: translateX(-100%);
    display: block;
    background: #fff;
    text-align: center;
}

section:target > article {
    -webkit-transform: translateX(0%);
}

section:target ~ section > article {
    -webkit-transform: translateX(100%);
}

nav a {
    display: block;
}

JavaScript

if(!location.hash) location.hash='home';