JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<div id='myp-image-container'>
    [single combined canvas here]
</div>

<div id='myp-name-panel'>
    <div class='myp-name-panel-arrow'>
        <div class='myp-arrow-prev'><</div>
        <div class='myp-arrow-name'>
            <a href='mythic/987'>Scalybottom</a>
        </div>
    </div>
	<div id='myp-name-container'>
	    <div class='myp-mythic-name'>NAME HERE</div>
		<div class='myp-mythic-suffix'>
            <a hreff='suffix/17'>SUFFIX HERE</a>
        </div>
	</div>
	<div class='myp-name-panel-arrow'>
	    <div class='myp-arrow-next'>></div>
        <div class='myp-arrow-name'>
            <a href='mythic/567'>Roarytail</a>
        </div>
	</div>
</div>

<!-- Main section with 3 columns -->
<div id='myp-intro-container'>
    
    <!-- Little trophy icons. -->
    <div id='myp-trophies'>
        <div class='myp-intro-title'>
            Trophies
        </div>
        <div id='myp-trophies-list'>
	        <div class='myp-trophy hover-outer'>
	            <img src='..'>
                <div class='hover-inner'>trophy info</div>
	        </div>
            <div class='myp-trophy hover-outer'>
	            <img src='..'>
                <div class='hover-inner'>trophy info</div>
	        </div>
            <div class='myp-trophy hover-outer'>
	            <img src='..'>
                <div class='hover-inner'>trophy info</div>
	        </div>
            <div class='myp-trophy hover-outer'>
	            <img src='..'>
                <div class='hover-inner'>trophy info</div>
	        </div>
            <div class='myp-trophy hover-outer'>
	            <img src='..'>
                <div class='hover-inner'>trophy info</div>
	        </div>
            <div class='myp-trophy hover-outer'>
	            <img src='..'>
                <div class='hover-inner'>trophy info</div>
	        </div>
            <div class='myp-trophy hover-outer'>
	            <img src='..'>
                <div class='hover-inner'>trophy info</div>
	       ...

CSS

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

body {
    background-image: url("https://st3.depositphotos.com/1184927/32313/i/950/depositphotos_323139700-stock-photo-australian-country-landscape.jpg");
    background-size: cover;
    background-attachment: fixed;
}

/* Temporary */
.hover-outer {
    cursor: pointer;
}
.hover-outer .hover-inner {
    display: none;
}

/* Entire page within this */
#container {
    width: 980px;
    margin: auto;
}

/* Contains full-size canvas with BG etc. */

#myp-image-container {
    width: 900px;
    height: 560px;
    margin: auto;
    background-image: url("https://www.freshboo.com/wp-content/uploads/2014/04/amazing-horse.jpg");
    border: 5px solid silver;
}

/* Name panel, links to prev/next profiles. */

#myp-name-panel {
    width: 100%;
    height: 60px;
    margin: 10px 0;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
#myp-name-panel .myp-name-panel-arrow {
    width: 185px;
    height: 100%;
    background-color: #fff;
    text-align: center;
}
#myp-name-panel #myp-name-container {
    width: 60%;
    height: 100%;
    background-color: #fff;
    padding: 5px;
}
#myp-name-container .myp-mythic-name {
    font-size: 22px;
    font-weight: bold;
    margin: 2px 0 3px 0;
}
#myp-name-container .myp-mythic-suffix {
    font-style: italic;
}

/* Contains 3 columns, positioned */
#myp-intro-container {
    /* border: 1px dotted blue; */
    margin: 10px 0;
    width: 100%;
    height: 300px;
    position: relative;
}

/* Central column */

#myp-middle {
    position: absolute;
    top: 0;
    left: 280px;
    width: 420px;
    height: 300px;
}

/* Top section with key info */
#myp-info {
    height: 160px;
    background-color: #fff;
    border: 1px solid grey;
}

/* Table */
#myp-info-table {
    display: flex;
    flex-flow: row wrap;
}
#myp-info-table div {
    width: 50%;
    border: 1px dotted silver;
   ...

JavaScript

/*
* Most things are rendered in PHP first? For SEO?
* JSON data also hidden on page.
* So JS can re-render things after edits.

* Parsed stuff is put into this db object.
*/
const db = {
    mythic: {},
    // Feed/groom/play items. Load once only.
    items: []
};


class MythicProfile {
 
    constructor(){
        let mythic, user;
        try{
            mythic = JSON.parse(document.getElementById('json_mythic').textContent);
        }
        catch(error){
            console.log(error);
        }
        db.mythic = mythic;
        console.log(mythic);
    }
 
    // PHP should do this.
    renderInitial(){
        
    }

    renderTreasures(items){}
    
    renderTrophies(){}

}

let Profile = new MythicProfile();

$("#myp-tab-btns").on("click", ".myp-tab-btn", function(){
    let tab = $(this).data("tab");
    $(".myp-tab-content").hide();
    $("#myp-tab-content-" + tab).show();
    $(".myp-tab-btn").removeClass("myp-active-tab");
    $(this).addClass("myp-active-tab");
});