JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='job-list'></div>

<div id='job-info'></div>

CSS

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

#job-list {
    width: 840px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
#job-list .job-thumb {
    width: 200px;
    border: 1px solid grey;
    padding: 5px;
    margin: 5px 0;
}

JavaScript

const db = {

    breeds: [
        {
            id: 1, name: "Aquila",
            desc: "eagle and lion unite to create a versatile creature; fairly strong, a swift flier and fighter, able to take on any role."
        },{
            id: 1, name: "Opinicus",
            desc: "a curious relative of the griffin, with ornamental curved wings and nocturnal habits."
        },{
            id: 1, name: "Hippogriff",
            desc: "tall and sturdy equine hybrid. can gallop, fly and kick enemies to pieces. the neighing sounds a bit weird, though."
        },{
            id: 1, name: "Winged Minoan",
            desc: "elegant creature, smooth curving body shape and fan-like wings with pretty patterns."
        },{
            id: 1, name: "Wingless Minoan",
            desc: "sleek and cat-like, almost perfect in its simplicity. high agility and magic talent mean its inability to bite or claw doesn't hold it back in battle."
        },{
            id: 1, name: "Apadana Griffin",
            desc: "strange and primitive, colourful feather arrangements and a venomous sting"
        },{
            id: 1, name: "Axex",
            desc: "incredibly fast hunter, capable of great speed. the wings have little function, but add to its graceful appearance"
        },{
            id: 1, name: "Heraldic Griffin",
            desc: "be wary of fighting these ferocious beasts. sword-like spikes erupt from the males' bodies, while females are partially armoured."
        },{
            id: 1, name: "Qilin",
            desc: "a strange mystical beast, equine-like with an ever-flowing mane and tail. it is capable of floating and gliding through the air with magic."
        },{
            id: 1, name: "Meganeura",
            desc: "what just whizzed past? a giant dragonfly? fragile and weak compared to other griffins, these critters excel at speed and precision, and can learn useful defensive magic."
        },{
            id: 1, name: "Chamrosh",
            desc: "a...