JSFiddle - React, Tailwind, and code Playground

by MichelleFuchs

HTML

<div id="container">
                    <header>
                            <h1>Welcome Music Jedi!</h1>
                        </header>
                        <aside>
                            <h3>Feedbacks are welcomed!</h3>
                            <div class="form-row">
                                <input type="text" name="first-name" placeholder="First Name"/>
                            </div>
                            <div class="form-row">
                                <textarea rows="4" name="description" placeholder="Your thoughts?"></textarea>
                            </div>                        
                            <input type="submit"/>
                        </aside>
                        <article id="main-text">
                            <h3>Problems with Current Methods</h3>
                            <p>Learning the modes has been one of the most mystifying experience amongst music students.  These students then become teachers
                                who will then pass on the knowledge and perhaps some of the confusion, thus perpetuating rather than fixing the problem in 
                                educating modal playing.  Here I will teach you the modes the right way which starts with how YOU the listeners hear music
                                rather than visually what the modes are based on, thus making the modes useful in a musical context rather than inapplicable
                                knowledge.
                            </p>
                            <h3>What You Will Learn</h3>
                            <ol>                                     
                                <li><a href="">Redefining the modes</a></li>
                                <li>Relationship to the parent scales as a utility not as a foundation</li>
                                <li>Musical examples in classical and pop music</li>
                                <li>Application in...

CSS

#container{
        position: relative;
        margin-left: 20%;
        margin-right: 20%;
    }
    header{
        text-align: center;
    }
    .form-row{
        display: flex;
    }
    .form-row > input, .form-row > textarea{
        flex: 1;
        margin-bottom: 10px;
    }
    aside{
        float: left;
        position: absolute;
        width:30%;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        background-color: antiquewhite; 
    }
    aside > h3{
        margin: 10px;
    }
    aside > input[type="submit"]{
        margin-bottom: 10px;
    }
    article{
        float: right;
        box-sizing: border-box;
        width: 80%;
        padding-left: 15%;
        padding-right: 15%;
    }

    #main-text{
        background-color: green;
    }
    .modes-container{
        background-color: rgba(56, 211, 211, 0.8);
        padding: 0px;
    }
  .modes-container > ol{
        display: flex;    
        justify-content: space-between; /*supposedly provides spacing between <li> boxes but doesn't work yet*/
        
        padding: 0px; /*ol does have a left padding, whcih we need to remove*/
        width: 80%; /*10% space left and right*/
        margin: 0px  auto; /*horizontal centering*/
    }
    .modes-container > ol > li{     
        box-sizing: border-box;
        padding: 20px;
        list-style-position: inside;

    }
    .modes-container li:nth-child(1){background-color: rgba(128, 170, 206, 0.8)}
    .modes-container li:nth-child(2){background-color: rgba(206, 128, 171, 0.8)}
    .modes-container li:nth-child(3){background-color: rgba(164, 128, 206, 0.8)}
    .modes-container li:nth-child(4){background-color: rgba(205, 206, 128, 0.8)}
    .modes-container li:nth-child(5){background-color: rgba(206, 159, 128, 0.8)}
    footer{
        clear: both;
    } 

    /* visualization purpose */
    header, article, aside, footer, #container{
        border-style: solid; ...