JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
         <h1>My Characters</h1>

         <h2>All the different characters I've created over the years, many of whom have superpowers based on animals.</h2>

    </header>
    <article id="background">
        <section id="main">
            <section class="container inactive" id="Vacuum">
                 <h3>The Vacuum</h3>

                <p>Born the child of an inventor, the Vacuum's father made it big when he perfected a hand-held design for the L-RAD sonic beam weapon. Licensing his design to the military netted the Vacuum's immediate family 8.5B USD.</p>
                <p>As a result, from a young age, the Vacuum learned martial arts, developing a unique system devoid of blocks and strikes, relying instead on locks, flips, and holds.</p>
                <p>A secondary effect of his contact with military personnel is that the Vacuum was genetically altered in such a way that he can now control air, i.e. <i>aerokinesis</i>. Due to the extent of his powers , he has steel braces around his wrists, limiting his powers. he wears a comfortable sweat-suit with a custom mask that has a built-in night-vision visor.</p>
            </section>
            <section class="container inactive" id="Mu">
                 <h3>Mu</h3>

                <p>Mu is a lifelong crime-fighter, staring with his fifteen-year military career. After ending his enlistment as a general, he spent twenty-five years as an undercover police officer, and another ten years behind a desk at the FBI.</p>
                <p>During his time with the military, he was experimented on by a secret Government department, genetically altering Mu in such a way as to allow him to control friction.
                    <br />The purpose of the experiment was to enable Mu to chase down and capture the previous genetic experiments: civilian and military prisoners recruited by a mole hoping to overthrow the US Government from within.</p>
            </section>
            <section...

CSS

* {
    position: static;
}
body {
    background-image: url('Scorched Asphalt.png');
    background-size: cover;
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    text-align: center;
    background-color: rgba(238, 238, 238, 1);
    border: 2px solid black;
    margin: 0;
    padding: 0;
}
h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}
h2 {
    margin-top: 0;
    font-size: large;
}
hr {
    color: black;
    border: 1px double black;
    border-style: double;
    width: 75%;
    margin: 0;
}
#main {
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1em;
    padding-left: 1em;
    line-height: 1em;
}
h3 {
    padding: 0;
    margin: 0;
}
#Vacuum {
    left: 51px;
    top: 80px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, 1);
    color: white;
}
#Mu {
    left: 75px;
    top: 125px;
    background-color: rgba(125, 100, 50, 1);
}
#Elasmobranchii {
    left: 100px;
    top: 165px;
    background-color: rgba(50, 100, 125, 1);
}
#Phyllobates {
    left: 125px;
    top: 205px;
    background-color: rgba(255, 255, 255, 1);
}
.container {
    width: 33%;
    height: 67%;
    border: solid black 2px;
    margin: 0;
    padding: 1em;
    border-radius: .5em;
    font-weight: bold;
    position: absolute;
    cursor:pointer;
}
.active {
    left: 33%;
    top: 380px;
}
.inactive {
}
}

JavaScript

$(document).ready(function () {
    alert('Click a card to make it active.Click it again to de-activate it.');

    $(document).on('click', '.inactive', function () {
        $('#Vacuum').css({ 'left': '50px', 'top': '80px', 'z-index': '1' });
        $('#Mu').css({ 'left': '75px', 'top': '125px', 'z-index': '2' });
        $('#Elasmobranchii').css({ 'left': '100px', 'top': '165px', 'z-index': '3' });
        $('#Phyllobates').css({ 'left': '125px', 'top': '205px', 'z-index': '4' });

        $(this).css({ 'top': '15%', 'left': '50%', 'z-index': '5' });
        $(this).addClass('active');
        $(this).removeClass('inactive');
    });

    $(document).on('click', '.active', function () {
        $('#Vacuum').css({ 'left': '50px', 'top': '80px', 'z-index': '1' });
        $('#Mu').css({ 'left': '75px','top': '125px', 'z-index': '2' });
        $('#Elasmobranchii').css({ 'left': '100px', 'top': '165px', 'z-index': '3' });
        $('#Phyllobates').css({ 'left': '125px', 'top': '205px', 'z-index': '4' });

        $(this).removeClass('active');
        $(this).addClass('inactive');
    });
});