JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<!-- Begin Player -->
<div class='stormplayer'>

    <!-- Begin Player Header -->
    <header class='stormplayer_header'></header>
    <!-- End Player Header -->

    <!-- Begin Player Navigation -->
    <navigation class='stormplayer_navigation'>
        <header class='stormplayer_navigation_header'></header>
        <section class='stormplayer_navigation_body'></section>
        <footer class='stormplayer_navigation_footer'></footer>
    </navigation>
    <!-- End Player Navigation -->

    <!-- Begin Player Body -->
    <section class='stormplayer_body'>
        <section class='stormplayer_body_content'>
            <header class='stormplayer_body_content_header'></header>
            <section class='stormplayer_body_content_body'></section>
            <footer class='stormplayer_body_content_footer'></footer>
        </section>
        <section class='stormplayer_body_stack'>
            <navigation class='stormplayer_body_stack_list'></navigation>    
        </section>
    </section>
    <!-- End Player Body -->

    <!-- Begin Player Footer -->
    <footer class='stormplayer_footer'></footer>
    <!-- End Player Footer -->

</div>
<!-- End Player -->

CSS

.stormplayer {

    /* Standard stuff */

    background: #000;
    font-family: Verdana;
    color:#fff;

    /* Flex boxes */

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: left;

    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    -moz-box-align: left;

    display: box;
    box-orient: vertical;
    box-pack: center;
    box-align: left;

}

.stormplayer_body {

    /* Standard stuff */
    background: #000;
    color:#fff;

    /* Flex boxes */

    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: left;
    -webkit-box-align: left;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: left;
    -moz-box-align: left;

    display: box;
    box-orient: horizontal;
    box-pack: left;
    box-align: left;

}

.stormplayer_body_content_body_canvas {
 background:#666;   
    margin:10px 0 0 10px;
    width:600px;
}
.stormplayer_body_content {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}


.stormplayer_header_logo {
 margin: 0px 0 0px 10px;   
 padding: 10px 0 10px 0px;   
}

.stormplayer_body_stack {
    
        margin:10px 0 0 10px;

    
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;
    
    /* Expand to fill space */
    -moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.stormplayer_body_stack_list_item {
 clear:left;   
    margin:0 0 10px 0;
}

.stormplayer_footer_description {
 margin: 0px 0 0px 10px;   
 padding: 10px 0 10px 0px;   
}

JavaScript

var stormplayer = stormplayer || {};

stormplayer.render = function() {
    
    /* Reset */
   
    /* Branding */
    
    // Embed header
    jQuery('.stormplayer_header').html('').append("<div class='stormplayer_header_logo'>MediaStorm</div>");
    
    // Menu "powered by"
    jQuery('.stormplayer_body_navigation_footer').html('').append('<div>Powered by MediaStorm</div>');

    /* Content */

    jQuery('.stormplayer_body_content_body').html('').append("<canvas class='stormplayer_body_content_body_canvas'>No canvas</canvas>");

    /* Stack */
    jQuery( '.stormplayer_body_stack_list' ).html('');
    
    for (var x = 0;  x < 3; x += 1 ) {
        var list_item = ''
        list_item += "<div class='stormplayer_body_stack_list_item'>";
        list_item += "<header class='stormplayer_body_stack_list_item_header'>Special Feature</header>";
        list_item += "<section>12:23</section>";
        list_item += "<footer></footer>";
        list_item += '</div>';
        jQuery('.stormplayer_body_stack_list').append( list_item );
    }

    /* Embed Description */
    
    jQuery( '.stormplayer_footer' ).html('').append( "<div class='stormplayer_footer_description'><p>Bacon ipsum dolor sit amet pork belly short ribs turducken meatloaf, chuck frankfurter venison ham hock bresaola drumstick capicola.</p><p>Strip steak chuck turkey short loin, leberkas kielbasa pancetta pork shoulder bresaola hamburger spare ribs. Chicken prosciutto drumstick filet mignon pastrami.</p></div>" );

};
jQuery(document).ready(function() {
    window.setInterval( stormplayer.render, 100 );
} );