JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Galdeano">
<div id='container'>

    <div class='page-container'>
        <div id='topbar'>

            <a class='logo' href=''>HorseMarks</a>
            <div class='grow'></div>
            <a class='link' href=''>Search</a>
            <a class='link' href=''>Forum</a>
            <a class='link' href=''>Account</a>
        </div>

        <!-- Fjord pic -->
        <div id='topbanner'></div>

        <div class='page-content'>

        <h1>HorseMarks Demo</h1>
        <p>This is a mockup of how the database could be searched. Only a dozen horses have been drawn; the rest use random placeholder images. Only a few breeds and phenotypes here, but you get the idea, hopefully.<br>Click on a horse to load its profile page (at the bottom) with full details and family tree.</p>

<form id='search_form'>
    <fieldset>
    <legend>Search criteria</legend>
    
    <input type='hidden' name='csrf' value='ggggg'>
    <input type='hidden' name='whatdo' value='search_horses'>
    <input type='hidden' name='search_page' id='search_page' value='1'>
    
    <div class='toggle-section' data-section='basic'>
        <b>+ Basics</b>
    </div>
    <div id='basic-search-container'>
        <div class='section'>
            Name: <input type='text' id='search_name' name='search_name' maxlength='50'>
        </div>
        <div class='section'>
            Sex: <select id='search_sex' name='search_sex'>
                <option value='0' selected>Either</option>
                <option value='1'>Male</option>
                <option value='2'>Female</option>
            </select>
        </div>
        <div class='section'>
            Breed 1: <select id='search_breed1' name='search_breed1'></select>
        </div>
        <div class='section'>
            Breed 2: <select id='search_breed2' name='search_breed2'></select>
        </div>
        <div class='section'>
            Sire ID: <input type='number'...

CSS

/* Variables */
:root {
    --gold_vdark: #635B4D;
    --gold_dark: #BAA47D;
    --gold_medium: #DEC497;
    --gold_light: #F5E8D2;
    --silver: #ddd;
    --silver_medium: #a3a3a3;
    --silver_dark: #424242;
}

div, img, button, p, a, input, select, fieldset, form, legend {
    box-sizing: border-box;
}

body {
    background-image: url("https://images.pexels.com/photos/4314490/pexels-photo-4314490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

html, body, button {
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Galdeano', sans-serif;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
}

a:hover {
    color: rgba(0, 0, 0, 1);
}

#container {
    width: 90%;
    min-width: 900px;
    max-width: 1000px;
    margin: 30px auto;
}

.page-container {
    width: 100%;
    background-color: #fff;
    border: 1px solid silver;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.3);
}

#topbar {
    background-color: #fff;
    padding: 10px 30px;
    display: flex;
    font-size: 20px;
}

#topbar .grow {
    flex: 111;
}

#topbar .logo {
    border: 1px dotted silver;
}

#topbar .link, #topbar .logo {
    padding: 10px;
    margin: 0px 5px;
    transition: 0.3s;
}

#topbar .link:hover {
    background-color: #eee;
    transition: 0.3s;
}

#topbanner {
    height: 200px;
    background-image: url("https://images.pexels.com/photos/4314490/pexels-photo-4314490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    background-size: cover;
    background-position: center;
}

.page-content {
    background-color: #fff;
    padding: 1.5em;
}

h1 {
    text-align: center;
    font-size: 30px;
    margin-top: 0px;
}

.menu {
    margin: 20px auto;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.menu .link {
    padding: 10px;
    margin: 0px 10px;
    transition: 0.3s;
}

.menu .link:hover {
   ...

JavaScript

// This is a JS mockup/demo of searching, viewing, editing horses.
// PHP and SQL later.

const db = {
    breeds: [
        {id: 1, type: 1, name: "Arabian"},
        {id: 2, type: 1, name: "Thoroughbred"},
        {id: 3, type: 1, name: "Anglo-Arab"},
        {id: 4, type: 1, name: "Anglo-Norman"},
        {id: 5, type: 1, name: "Selle Français"},
        {id: 6, type: 1, name: "Holsteiner"},
        {id: 7, type: 1, name: "Oldenburg"},
        {id: 8, type: 1, name: "Dutch Warmblood/KWPN"},
        {id: 9, type: 1, name: "Friesian"},
        {id: 10, type: 2, name: "Shetland"},
        {id: 11, type: 1, name: "Fjord"},
        {id: 12, type: 2, name: "Pony of the Americas"},
        {id: 13, type: 2, name: "Falabella"},
        {id: 14, type: 1, name: "Camargue"},
        {id: 15, type: 1, name: "Camarillo White"},
        {id: 16, type: 1, name: "Campolina"},
        {id: 17, type: 1, name: "Akhal-Teke"},
        {id: 18, type: 1, name: "Andalusian/PRE"},
        {id: 19, type: 1, name: "Lusitano/PSL/Altèr Real"},
        {id: 20, type: 1, name: "Barb"},
        {id: 21, type: 1, name: "Bardigiano"},
        {id: 22, type: 1, name: "Quarter"},
        {id: 23, type: 1, name: "Paint"},
        {id: 24, type: 1, name: "Azteca"},
        {id: 25, type: 1, name: "Noriker/Pinzgauer"},
        {id: 26, type: 1, name: "Aegidienberger"},
        {id: 27, type: 1, name: "Icelandic"},
        {id: 28, type: 1, name: "Peruvian Paso"},
        {id: 29, type: 1, name: "Mongol horse"},
        {id: 30, type: 2, name: "Faroe pony"},
        {id: 31, type: 1, name: "Nordlandshest"},
        {id: 32, type: 1, name: "Yakutian"},
        {id: 33, type: 1, name: "Kalmyk"},
        {id: 34, type: 1, name: "Kyrgyz"},
        {id: 35, type: 1, name: "Novokirghiz"},
        {id: 36, type: 1, name: "Russian Don"},
        {id: 37, type: 1, name: "Paso Fino"},
        {id: 38, type: 1, name: "Spanish Mustang"},
        {id: 39, type: 1, name: "Sorraia"},
        {id: 40, type: 1,...