JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<form>
    <input type="text" placeholder="Resource Name" id="name" />
    <h1>Basic Information</h1>
    <input type="text" placeholder="Resource URL" />
    <input type="text" placeholder="Original Source" />
    <textarea></textarea>
    <select>
        <option value="">Select File Type:</option>
        <option value="pdf">PDF</option>
        <option value="doc">Word Document</option>
        <option value="ppt">Powerpoint</option>
        <option value="other">Other</option>
    </select>
</form>

CSS

body {
    font-family: sans-serif;
}
form {
    margin: 20px;
}
input, select {
    display: block;
    margin: 12px 0;
    min-width: 200px;
    padding: 3px;
}
#name {
    padding: 6px;
    font-size: 16px;
    width: 94%;
}

JavaScript

function Resource(name, url, desc, src, type, maturity) {
    this.name = name; // User-friendly name of the resource
    this.url = url; // Location of the resource
    this.description = desc;
    this.source = src; // Citation, if needed
    this.type = type; // file type, e.g. pdf, doc, ppt
    
    // properties for the "categories" that relate to this resource
    this.maturity = maturity; // the age/maturity of 
    
}