JSFiddle - React, Tailwind, and code Playground

by machristie

HTML

<div id="results">
    <div class="desktop-only">
        <input name="departure" placeholder="Departing from" type="text" />
        <input name="depdate" placeholder="On" type="date" size="10" />
        <input name="arrival" placeholder="Arriving in" type="text" />
        <input name="arrdate" placeholder="On" type="date" size="10" />
        <input name="submit" type="submit" value="Submit" onclick="$('table').show(); return false;"/>
    </div>
    <table>
        <thead>
            <tr>
                <th>Airline</th>
                <th>Departure Time</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>United</td>
                <td>Monday, Dec 1 6:30 AM</td>
                <td>$356</td>
            </tr>
            <tr>
                <td>Delta</td>
                <td>Monday, Dec 1 7:30 AM</td>
                <td>$329</td>
            </tr>
            <tr>
                <td>Delta</td>
                <td>Monday, Dec 1 10:00 AM</td>
                <td>$389</td>
            </tr>
        </tbody>
    </table>
</div>
<div id="mobile">
    <label for="departure">Departing from</label>
    <input name="departure" type="text" />
    <label for="depdate">Departing on</label>
    <input name="depdate" type="date" size="10" />
    <label for="arrival">Arriving in</label>
    <input name="arrival" type="text" />
    <label for="arrdate">Arriving on</label>
    <input name="arrdate" type="date" size="10" />
    <input name="submit" type="submit" value="Submit" onclick="$('#mobile').hide();$('table').show();return false;"/>
</div>

CSS

table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid #ccc;
    padding: 4px;
}
#mobile {
    display:none;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#mobile label, #mobile input {
    display: block;
}
@media only screen and (max-width: 480px) {
    .desktop-only {
        display: none;
    }
    #mobile {
        display: block;
    }
}

JavaScript

$('table').hide();