JSFiddle - React, Tailwind, and code Playground

by Varinder

HTML

<div class="page">
    <div class="fluid-wrapper loading">
        
    </div>
</div>

CSS

html,
body {
    margin:0;
    padding:0;
    background:#ddd;
}

.fluid-wrapper {
    height:0;
    overflow:hidden;
    position:relative;
    padding-bottom:100%;
}

.fluid-wrapper > img {
    position:absolute;
    display:block;
    width:100%;
}

/*demo specific styles*/
.page {
    max-width:100%;
    width:250px;
    margin:0 auto;
    background:#eee;
}

.page .loading:after {
    content:"hold your horses, loading media...";
}

JavaScript

var mediaElement = "<img src='http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg' />";

setTimeout(function() {
    $(".fluid-wrapper").removeClass("loading").append(mediaElement);
}, 2000);