JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head></head>
    <body>
        <section id="page1">
            <header>Page 1</header>
            <nav>
                <a href="#home">Home</a>
                <a href="#page2">Page 2</a>
                <a href="#page3">Page 3</a>
            </nav>
        </section>
        <section id="page2">
            <header>Page 2</header>
            <nav>
                <a href="#home">Home</a>
                <a href="#page1">Page 1</a>
                <a href="#page3">Page 3</a>
            </nav>
        </section>
        <section id="page3">
            <header>Page 3</header>
            <nav>
                <a href="#home">Home</a>
                <a href="#page1">Page 1</a>
                <a href="#page2">Page 2</a>
            </nav>
        </section>
        <section id="home">
            <header>Home</header>
            <nav>
                <a href="#page1">Page 1</a>
                <a href="#page2">Page 2</a>
                <a href="#page3">Page 3</a>
            </nav>
        </section>
    </body>
</html>

CSS

body {
    position: relative;
    width: 100px;
}

section,
section:target ~ section:last-child {
    width: 100px;
    position: absolute;
    top: 0;
    right: 125%;
}

section:target,
section:last-child {
    right: 0%;
}

section nav a {
    display: block;
}