JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>
    
    
    <!-- Enemies defeated -->
    <div id='pp-enemy-container'>
        <div id='pp-enemy-illus'>...</div>
        <div id='pp-enemy-box' class='pp-box'>
        
            <div class='pp-box-top'>
                <div class='pp-box-title'>Enemies defeated</div>
            </div>
            
            <div id='pp-enemy-list'>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                    <span>name</span>
                    <span>7</span>
                </div>
                <div class='pp-enemy-thumb'>
                   ...

CSS

div, img {
    box-sizing: border-box;
}

body {
    width: 1000px;
    background-color: skyblue;
}

#container {
    width: 980px;
    background-color: #fff;
    margin: 30px auto;
    padding: 30px;
    border-radius: 20px;
}


.pp-box {
    border: 1px solid silver;
    border-radius: 10px;
    overflow: hidden;
}
.pp-box-top {
    height: 45px;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    border-bottom: 1px solid silver;
}
.pp-box-top .pp-box-title {
    font-size: 28px;
}


/* TROPHIES */

#pp-trophy-container {
    position: relative;
    height: 330px;
}
#pp-trophy-illus {
    z-index: 2;
    width: 270px;
    height: 330px;
    border: 1px dashed blue;
    position: absolute;
    top: 0;
    right: -15px;
}
#pp-trophy-box {
    width: 700px;
    height: 260px;
    position: absolute;
    top: 35px;
    left: 0;
}
#pp-trophy-list {
    height: 182px;
    overflow: auto;
    transform: scaleX(-1);
}
#pp-trophy-list-inner {
    transform: scaleX(-1);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 5px;
}
#pp-trophy-list .pp-trophy-thumb {
    width: 100px;
    height: 100px;
    border: 1px dashed green;
    margin: 5px;
}
#pp-trophy-bottom {
    height: 32px;
    background-color: #eee;
    border-top: 1px solid silver;
    padding: 5px 20px;
    text-align: center;
}


/* SKILLS */

#pp-skill-container {
    height: 300px;
    position: relative;
}
#pp-skill-illus {
    z-index: 2;
    position: absolute;
    top: 0;
    left: -10px;
    width: 240px;
    height: 300px;
    border: 1px dashed blue;
}
#pp-skill-box {
    position: absolute;
    top: 20px;
    right: 0;
    width: 700px;
    height: 270px;
}
#pp-skill-list {
    height: 224px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
}
#pp-skill-list .pp-skill-thumb {
    width: calc(33% - 10px);
   ...