JSFiddle - React, Tailwind, and code Playground

by jthyten

HTML

<div id="content-shell">
    <div id="header">
        <div id="title">
            Jacob
            <!-- yoyoyoy 
            booom
            
            
            -->
        </div>
        
        <div id="nav">
            <div>Home</div>
            <div>Portfoio</div>
            <div>Contact</div>
        </div>
    </div>
    <div id="feature">
      Video            
    </div>
    <div id="about">
        about
    </div>
</div>

CSS

#content-shell {
    background: red;
    border: 1px solid black;
    margin: 5px;
    overflow: hidden;
    padding: 5px;
    width: 460px
}

#header {
    border-bottom: solid 3px black;
    width: 100%;
    /* Check out #header:after to see neat trick replacing the overflow:hidden css
     *
     * Use overflow hidden for most cases (including this one) but this is good
     * to use when you don't want to hide overflow but still want the overflow: hidden
     * effect.
     *
     * overflow: hidden;
     */
}


/* this is using the selector "#header" and the CSS psuedo-class :after
 * :before and :after psuedo-classes allow you to place content
 * before or after the children (contents) of the selected element
 */
#header:after {
    content: ''; /* add blank content after the last child of #header (after #nav)*/
    clear: both; /* the content should clear both left and right floats */
    display: block; /* the content should display as a block */
}

#title {
    background: green;
    float: left;
    width: 200px;
}

#nav {
    background: yellow;
    border-bottom: solid 3px black;
    float: left;
    padding: 0 0 1px 0;
    padding-bottom: 5px;
    width: 200px;
}

#nav div {
    background: orange;
    float: left;
    width: 60px;
}

#feature {
    background: blue;
    float: left;
    width: 220px;
}

#about {
    background: gainsboro;
    float: left;
    width: 220px;
}

JavaScript

$(function() {
    //alert('yo');
});