JSFiddle - React, Tailwind, and code Playground

by lmatonement

HTML

<div class="parent">
    <div class="upload-widget">
        <div class="used-uploads section">
            <h1>
                Available Upload Links
            </h1>
            <table>
                <thead>
                    <tr>
                        <th>Delete</th>
                        <th>URL</th>
                        <th>Files Allowed</th>
                        <th>Available</th>
                        <th>Download</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="deleteone">✖</a></td>
                        <td><a href="localhost://something-or-another/thislonghash1973829387">Share this URL</a></td>
                        <td>15</td>
                        <td>1</td>
                        <td><select><option name="one" value="one">one</option></select></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <hr>
        <div class="download-links section">
            <h1>
                Available Downloads
            </h1>
            <table>
                <thead>
                    <tr>
                        <th>Delete</th>
                        <th>URL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="deleteone">✖</a></td>
                        <td><a href="localhost://somegreatlink/hasehsohehash">Download Link</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <hr>
        <div class="section upload-body">
            <h1>
                Create New Upload Link
            </h1>
            <label class="breathe" for="number-of-files" alt="Enter 0 for unlimited files">Number of files to accept:</label>
            <input class="breathe" type="number" step="1" min="0" max="10000" name="number-of-files" /><br>
            <input class="breathe"...

CSS

.parent {}

table>tbody>tr>td {
    text-align: left;
    padding: 0 .5em .5em .5em;
}

table>thead>tr>th {
    text-align: left;
    padding: 0 .5em .5em .5em;
}

h1 {
        font-weight: normal;
        margin: 1em;
}

.upload-label {
    font-size: x-large;
    padding: 1em;
}

.breathe {
    margin: 1em;
}

.upload-widget {}

.upload-body {
    /*display:inline-block;*/
}

.section {
    /*border: thin solid;*/
    border-radius: .2em;
    margin: 1em;
}