JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container center">
        <!-- 1. Main Title Screen -->
        <div class="screen main-screen visible" id="main-screen">
            <p>Find your Archivibe</p>
            <button class="btn btn-primary" id="1" onclick="next(this.id)">Begin</button>
            <button onclick="document.getElementById('input-screen').style.display='none';">Remove element</button>
        </div>

        <!-- 2. Input details -->
        <div class="screen input-screen hidden" id="input-screen">
            <h2>First, some info about yourself</h2>
            <div class="form-div">
                <form>
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name">
                    </div>
                    <div class="mb-3">
                        <label for="region" class="form-label">Region</label>
                        <input type="text" class="form-control" id="region">
                    </div>
                    <div class="mb-3">
                        <label for="gender" class="form-label">Gender</label>
                        <input type="text" class="form-control" id="gender">
                    </div>
                    <div class="mb-3">
                        <label for="age" class="form-label">Age</label>
                        <input type="number" class="form-control" id="age" min="1">
                    </div>
                    <button type="button" class="btn btn-primary" id="2" onclick="next(this.id)">Submit</button>
                </form>
            </div>
        </div>
</div>

CSS

.center {
    text-align: center;
    height: 100vh !important;
}

.screen {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'Work Sans';
}

.no-height {
    max-height: 0;
}

.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.75s linear;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.75s linear;
    max-height: 0;
}

JavaScript

function next(id) {
    // list of screens
    screens = ["main-screen", "input-screen", "questions-screen", "results-screen", "compare-screen"];

    // hide current page, display next page
    document.getElementById(screens[id-1]).classList.toggle("hidden");
    document.getElementById(screens[id-1]).classList.toggle("visible");
    document.getElementById(screens[id]).classList.toggle("hidden");
    document.getElementById(screens[id]).classList.toggle("visible");
}