JSFiddle - React, Tailwind, and code Playground

by rtgibbons

HTML

<div class="left">
    <img id="logo" src="/logo.png" class="placeholder" />
</div>
<div class="right">
    <div id="thumbs">
        <img src="/thumb.png" class="placeholder" />
        <img src="/thumb.png" class="placeholder" />
        <img src="/thumb.png" class="placeholder" />
        <img src="/thumb.png" class="placeholder" />
        <img src="/thumb.png" class="placeholder" />
    </div>
</div>

CSS

.left{
 float: left;   
}
#logo{
    width: 300px;
    height: 400px;
}
#thumbs img{
    width: 100px;
    height: 80px;
    float: left;
    margin: 3px;
}

JavaScript

$(document).ready(function(){
    var workhorse = $("<canvas>");
    var whc = workhorse[0].getContext("2d");
    whc.textBaseline = 'bottom';
    var $placeholder_imgs = $(".placeholder");
    $.each($placeholder_imgs, function(x,i){ 
      var w = $(i).width();
      var h = $(i).height();
      whc.canvas.width = w;
      whc.canvas.height = h;
      var rand = Math.floor(Math.random() * 40) + 200;
      whc.fillStyle = "rgb("+rand+","+rand+","+rand+")";
      whc.fillRect(0,0,w,h);
      whc.font = "bold 12px sans-serif";
      whc.fillStyle = "#222";
      whc.fillText(w+"px x "+h+"px",5,15);
      var placeholder_src = workhorse[0].toDataURL("image/png");
      $(i).attr("src", placeholder_src);
    });
});