JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="user-message">Prøv at resize browservinduet</div>
<div>
    <p>
    Progress indicator
    </p>
    <div id="settings">
    <label>
        <input type="radio" name="setting" value="top"> Altid øverst</label><br>
        <label>
<input type="radio" name="setting" value="left" checked="checked"> Til venstre på store skærme, øverst på små skærme
            </label>
        </div>
    </div>
<div class="container">
    <div class="progress">
        <p>Progress indicator here</p>
        <ol>
            <li>Alpha</li>
            <li>
                <div class="header">Beta header</div>
                <div class="subheader">Sub-header is wrapping very nicely, thank you very much</div>
            </li>
            <li>Gamma</li>
            <li>Ypsilonsd fgfsd gsdfg sdf sd fsdfas</li>
            <li>Theta</li>
        </ol>
        <p>I need some wrap on this very very very long loooooong text.</p>
    </div>
    <div class="form">
        
        <p>Form here</p>
        <br />
        <label>Your name</label>
        <br />
        <input type="text" />
        <br />
        <label>Your number</label>
        <br />
        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
        </select>
        
        <br />
        <br />
        <br />
    </div>
</div>

CSS

body {
    font-family: Arial, Verdana, sans-serif;
}
.header, .subheader, p {
    white-space: normal;
}
.header {
    font-size: 24px;  
    padding: 0;
}
.subheader {
    font-size: 18px;
    padding: 0;
}
ol {
    margin-left: 30px;
    list-style-type: decimal;    
}
.user-message {
    font-size: 24px;
}
.container { 
    margin-top: 20px;
}
.progress, .form { 
    padding: 20px;
}
.display-block {
    display: block !important;
}
/* The most interesting stuff starts here */

.progress {
    white-space: nowrap; 
    background-color: lightgreen;    
}

.form {
    background-color: lightblue;
}



@media screen and (min-width: 768px) {
    .progress, .form {
        display: table-cell;
    }
    .form {
        width: 100%;
    }
}

JavaScript

$( "#settings" ).change(function() {
    var setting = $(this).find(":checked").val();
    if(setting == "top"){
        $(".progress, .form").addClass("display-block");
    }
    else {
        $(".progress, .form").removeClass("display-block");
    }
});