JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='nq-border'>
<div id='nq-top'>NeoQuest II</div>
<div id='nq-container'>
    
    <div id='screen-battle-won'>
        You won the fight!
        <br><br>
        <img src="//images.neopets.com/nq2/c/p1n2_939f7.gif" width="130" height="130" border="0" style="z-index:0"> 
        <img src="//images.neopets.com/nq2/c/p2n2_399db.gif" width="130" height="130" border="0" style="z-index:0">
        <br><br>
        Rohane gained <b>80</b> experience points!
        <br><br>
        Mipsy gained <b>80</b> experience points!
        <br><br>
        You found <b>34</b> gold pieces!
        <br><br>
        You found <b>1</b> deadly shortsword!
        <br>
        You found <b>1</b> gallant ringmail!
        <br><br>
        You gain <b>500</b> neopoints!
        <br><br>
        <a href="nq2.phtml?finish=1"><img src="//images.neopets.com/nq2/x/tomap.gif" alt="Return to map" width="80" height="35" border="0"></a>
    </div>
    
    <div id='screen-battle-lost'>
        
    </div>
    
    <div id='inventory-table'>.......</div>
    
    
    
    <div id='screen-inventory'>
    
        <div style="padding:7px;">
    <b>- Inventory and Party Info -</b>
    <br><a href="nq2.phtml"><img src="//images.neopets.com/nq2/x/tomap.gif" alt="Return to map" width="80" height="35" border="0"></a>

    <table border="0" cellpadding="0" cellspacing="0" width="560">
        <tr style='background-color:#fff'>
            <td style='background-color:#fff' width="45" height="40" rowspan="2">
                <img src="//images.neopets.com/nq2/c/p1i2_9ec22.gif" width="40" height="40" border="0" style="z-index:0">
            </td>
            <td width="3"></td>
            <td width="70">
                <font color="blue"><b>Rohane</b></font>
            </td>
            <td width="50" rowspan="2">
                <a href="nq2.phtml?act=skills&show_char=1">0 skill points</a>
            </td>
            <td width="40">
               <b>HP:</b>
            </td>
            <td...

CSS

div, img, canvas, button, p, table, tr, td {
    box-sizing: border-box;
}

table {
    width: 100%;
    border-collapse: collapse;
}
table td {
    padding: 2px 5px;
}

body, td, select, input {
    font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif;
	font-size: 9pt;
}

a {
    font-weight: bold;
    text-decoration: none;
}


#nq-border {
    width: 630px;
    box-shadow: 0 0 0 2px silver, 0 0 0 4px #ddd;
}
#nq-top {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    padding: 3px;
}
#nq-container {
    text-align: center;
    padding: 20px;
}


#inventory-table {
    border-collapse: collapse;
    text-align: left;
}
#inventory-table th {
    background-color: #fff;
}
#inventory-table td {
    padding: 2px 5px;
}
#inventory-table tr:nth-child(odd){
    background-color: #aaa;
}
#inventory-table tr:nth-child(even){
    background-color: #bbb;
}

JavaScript

const db = {

    itemTypes: [
        {
            id: 1, name: "Healing Potion",
            desc: "Use this to restore a character's HP at any time. In battle, only the character themself can use it."
        },
        {
            id: 2, name: "Damage Potion",
            desc: "In battle, a character can throw this at an enemy to hurt them."
        },
        {
            id: 3, name: "Haste Potion",
            desc: "In battle, a character can use this to increase their speed."
        },
        {
            id: 4, name: "Slow Potion",
            desc: "In battle, a character can throw this at an enemy to reduce their speed."
        },
        {
            id: 5, name: "Resurrection Potion",
            desc: "Use this to revive a fallen ally at any time. In battle, another character must use it on them."
        },
        
        // Weapons
        
        {
            id: 6, name: "Sword",
            desc: "A weapon that can be equipped by Rohane."
        },
        {
            id: 7, name: "Wand",
            desc: "A weapon that can be equipped by Mipsy."
        },
        {
            id: 8, name: "Bow",
            desc: "A weapon that can be equipped by Talinia."
        },
        {
            id: 9, name: "Staff",
            desc: "A weapon that can be equipped by Velm."
        },
        
        // Armour
        
        {
            id: 10, name: "Metal Armour",
            desc: "Defensive armour that can be worn by Rohane."
        },
        {
            id: 11, name: "Wizard Robe",
            desc: "Defensive clothing that can be worn by Mipsy."
        },
        {
            id: 12, name: "Leather Armour",
            desc: "Defensive armour that can be worn by Talinia."
        },
        {
            id: 13, name: "Holy Chain Armour",
            desc: "Defensive armour that can be worn by Velm."
        },
        
        // Other
        
        {
            id: 14, name: "Artifact",
            desc:...