JSFiddle - React, Tailwind, and code Playground

by serebrov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <div id="layer-bg">
      <div class="wrap">
        <div class="tile-block span-2">
          <div class="tile quarter grey"></div>
          <div class="tile quarter grey"></div>
          <div class="tile half grey"></div>
        </div>
        <div class="tile-block span-1">
          <div class="tile quarter blue"></div>
          <div class="tile quarter light-grey"></div>
        </div>
        <div class="tile-block span-2">
          <div class="tile full light-grey"></div>
        </div>
        <div class="tile-block span-1">
          <div class="tile quarter blue"></div>
          <div class="tile quarter light-grey"></div>
        </div>
        <div class="tile-block span-2">
          <div class="tile half grey"></div>
          <div class="tile quarter grey"></div>
          <div class="tile quarter grey"></div>
        </div>
        <div class="tile-block span-2">
          <div class="tile full light-grey"></div>
        </div>
      </div>
    </div>
    <div
      id="layer-content"
      itemscope
      itemtype="http://schema.org/SoftwareApplication"
    >
      <div id="banner">
        <h1>Header</h1>
      </div>

      <div id="wrapper">
        <div class="wrapper-i"></div>
        <div id="header"></div>
        <div class="aside">
          <div id="buzz-tab"></div>
          <div id="gallery-tab" style="display:none">
            <div class="block">
              <div class="header">
                <h3>Gallery</h3>
              </div>
              <div id="tab20" class="tab">
                <div class="carusel">
                  <div class="holder">
                    <ul id="slides">
                      <li itemprop="screenshots" id="slide0">
                        <img
                          src="https://images.beta.cosmos.so/a6b5dcf9-d897-433d-b42a-41f84ea733f8?format=webp&w=692.5"
                        />
                   ...

CSS

#layer-bg {
        /*position: absolute;*/
        /* or this: */
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        height: 100%;
        width: 100%;
        opacity: 0.9;
      }
      #layer-bg .wrap {
        /*opacity: 0.8;*/
      }
      #layer-bg .tile-block {
        /*height: 456px;*/
        /*margin: 0px;*/
        /*background-color: white;*/
      }
      #layer-bg .tile {
        /*opacity: 0.6;*/
      }
      #layer-bg div {
        /*border: solid 2px white;*/
        /*margin: 1px;*/
        float: left;
        overflow: hidden;
        background-repeat: no-repeat;
      }
      #layer-bg .quarter {
        /*width: 148px; [> looks better then 150 - small boxes aligned to large <]*/
        /*height: 150px;*/
      }
      #layer-bg .half {
        /*width: 300px;*/
        /*height: 150px; */
      }
      #layer-bg .full {
        /*width: 300px;*/
        /*height: 302px;*/
      }

      #layer-bg .span-1 {
        /*width: 150px;*/
      }
      #layer-bg .span-2 {
        /*width: 300px;*/
      }
      #layer-bg .span-3 {
        /*width: 454px;*/
      }

      #layer-bg {
      }
      #layer-bg div {
      }

      #layer-content {
        position: absolute;
        z-index: 2;
        height: 100%;
        width: 100%;
      }

JavaScript

var settings = { background_color: 'teal' }

    jQuery(document).ready(function () {
      makeBackgroundScreenshots(settings)
    })

    function makeBackgroundScreenshots(bgColor) {
      var $images = $('#gallery-tab img')
      preloadImages($images, function (images) {
        buildBackground(bgColor, images)
      })
    }

    function preloadImages($images, callback) {
      var len = $images.length
      var loaded = 0
      var images = []
      for (var i = 0; i < len; i++) {
        var img = new Image()
        img.src = $($images[i]).attr('src')
        images.push(img)
        img.onload = function () {
          loaded += 1
          if (loaded == len) {
            callback(images)
          }
        }
      }
    }

    function buildBackground(bgColor, images) {
      if (!images.length) {
        return
      }
      //set sizes for tiles
      var repeat = 30 //number of template clones
      var size = 150 //px
      var margin = 1 //px

      //find big images to use for big boxes
      var imagesBig = []
      for (var idx = 0; idx < images.length; idx++) {
        if (images[idx].height >= size * 2) {
          imagesBig.push(images[idx])
        }
      }
      if (!imagesBig.length) {
        imagesBig = images
      }

      $divs = $('#layer-bg .wrap > .tile-block')
      for (var i = 0; i < repeat; i++) {
        $divs.clone().appendTo($('#layer-bg .wrap'))
      }

      $('div.tile').css('border', margin + 'px solid white')
      $('div.tile').css('backgroun-color', 'white')
      $('div.tile').css('margin', '0px')
      $('div.quarter').css('width', size + 'px')
      $('div.quarter').css('height', size + 'px')
      $('div.half').css('width', 2 * size + 2 * margin + 'px')
      $('div.half').css('height', size + 'px')
      $('div.full').css('width', 2 * size + 2 * margin + 'px')
      $('div.full').css('height', 2 * size + 2 * margin + 'px')

      //$('div.tile-block').css('height', (3*size+6*margin)+'px'); //three blocks
  ...