JSFiddle - React, Tailwind, and code Playground

by roeburg

HTML

<!--
/*
    Self Executing Anonymous Functions
    ==================================
    The HTML elements declared before the script block will be loaded.
    The elements delcared after the script block would not have been 
    loaded and hence unavailable for any manipulation.
*/
-->

<div class="before">
    Before Div. This content will change!
</div>
<script>
    (function () {
        $(".before").html("Since the div is declared before the script block, its loaded and we're able to manipulate it.");
        $(".after").html("The div declared after the script block is not yet loaded, we're not able to do anything!");
    })()
</script>
<div class="after">
    After Div. This content will not change.
</div>

CSS

div{
    margin: 20px 20px 20px 20px    
}