JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>
    
    <div id='classes-container'></div>
    
    <div id='class-info-container'>
        <div id='class-info'>
            <div id='class-info-illus'></div>
            <div id='class-info-text'>
                <div id='class-info-name'></div>
                <div id='class-info-desc'></div>
                <div id='class-info-perks'></div>
                <div id='class-info-comps'></div>
                <div id='class-info-comps-desc'></div>
                <div id='class-info-close'>Close</div>
            </div>
        </div>
    </div>
    
</div>

CSS

div, img, button, ul, li, p {
    box-sizing: border-box;
}

body {
    background-color: silver;
}

#container {
    width: 900px;
    margin: 20px auto;
    position: relative;
}

#classes-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

#classes-container .class-container {
    width: 190px;
    height: 170px;
    margin: 10px;
    background-color: #eee;
    border: 1px solid black;
    box-shadow: 0 3px 8px 4px rgba(0, 0, 0, 0.3);
    padding: 10px;
    text-align: center;
    transition: 0.2s;
}
#classes-container .class-container:hover {
    cursor: pointer;
    background-color: #fff;
    transition: 0.2s;
}

#classes-container .class-container .class-thumb {
    width: 100%;
    height: 120px;
    border: 1px solid grey;
}
#classes-container .class-container .class-thumb img {
    width: 100%;
    height: 100%;
}
#classes-container .class-container .class-name {
    margin-top: 5px;
    font-size: 20px;
    font-variant: small-caps;
}

#class-info-container {
    display: none;
    width: 750px;
    min-height: 300px;
    background-color: #fff;
    box-shadow: 0 3px 40px 10px rgba(0, 0, 0, 0.6);
    border: 2px solid black;
    position: fixed;
    top: calc(50% - 150px);
    left: calc(50% - 350px);
}
#class-info {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

#class-info-illus {
    width: 200px;
    background-color: #eee;
}
#class-info-illus img {
    width: 100%;
    height: 100%;
}
#class-info-text {
    width: 550px;
    padding: 10px 15px;
    /*background-color: gold;*/
}

#class-info-comps {
    border-top: 1px solid silver;
    padding: 10px;
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
}
#class-info-comps .class-info-comp {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    cursor: pointer;
}
#class-info-comps .class-info-comp img {
    width: 100%;
    height: 100%;
}
#class-info-comps .selected-comp {
    box-shadow: 0...

JavaScript

const db = {

    classes: [
        
        {
            id: 1, name: "Astronomer",
            thumb: "https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0512/1622/MOTIF_CONSTELATIONS-01_shop_thumb.png",
            illus: "https://i.pinimg.com/originals/7a/59/d4/7a59d46e5e7718f11a8110e5af680bfb.jpg",
            desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
            perks: [
                "Access to exclusive maps: Valley of the Moon, Starfall Isle",
                "All stellar-themed Beasts grow, heal and learn faster under your care",
                "Visit the Observatory for new gifts and trades daily?",
                "Umm",
                "Umm"
            ]
        },
        {
            id: 2, name: "Archaeologist",
            thumb: "http://www.fossilmall.com/EDCOPE_Enterprises/ammonites/ammo87/11014Bt.jpg",
            illus: "https://www.basementguides.com/wp-content/featured-content/archeology/images/sec_12.jpg",
            desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
            perks: [
                "Access to exclusive maps: Dry Canyon, Ancient Cave",
                "All stone- and bone-based Beasts grow, heal and learn faster under your care",
                "Extract DNA from fossils and create rare Beast eggs",
                "Umm",
                "Umm"
            ]
        },
        {
            id: 3, name: "Metalsmith",
            thumb: "https://5.imimg.com/data5/FO/OC/GLADMIN-8895399/mechinical-projects-250x250.png",
            illus:...