JSFiddle - React, Tailwind, and code Playground

by moritzkobrna

HTML

<section id="hero">
  <div class="content">
    Spitzenform ist super!
  </div>
</section>

SCSS

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
  
#hero {
  height: 400px;
  width: 100%;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .content {
    z-index: 2;
    padding: 30px 100px;
    border-radius: 10px;
    background: white;
  }
}

JavaScript 1.7

const IMAGES = [
	'http://tmp.lab.moritz.pro/pattern1.png',
	'http://tmp.lab.moritz.pro/pattern2.png',
	'http://tmp.lab.moritz.pro/pattern3.png',
	'http://tmp.lab.moritz.pro/pattern4.png',
	'http://tmp.lab.moritz.pro/pattern5.png',
	'http://tmp.lab.moritz.pro/pattern6.png',
	'http://tmp.lab.moritz.pro/pattern7.png',
	'http://tmp.lab.moritz.pro/pattern8.png',
	'http://tmp.lab.moritz.pro/pattern9.png',
	'http://tmp.lab.moritz.pro/pattern10.png',
	'http://tmp.lab.moritz.pro/pattern11.png',
	'http://tmp.lab.moritz.pro/pattern12.png',
	'http://tmp.lab.moritz.pro/pattern13.png',
	'http://tmp.lab.moritz.pro/pattern14.png',
];

const BASE_LINE_HEIGHT = 40;
const IMAGE_PADDING = 0;

const preloadImages = (images) => {
	return new Promise(resolve => {
  	let loaded = 0;
    let loaedImages = [];
    
    const onLoaded = function() {
    	loaded += 1;
      loaedImages.push(this);
      if (loaded >= images.length) resolve(loaedImages);
    }
    
    images.forEach(src => {
      const image = new Image();
      image.onload = onLoaded;
      image.src = src;
    });
  });
}

const background = (domElement, images) => {
  domElement.style.position = 'relative';
  
  const children = document.querySelector('.content');
  
	const canvasElement = document.createElement('canvas');
  const ctx = canvasElement.getContext('2d');
    
  canvasElement.style.zIndex = '1';
  canvasElement.style.position = 'absolute';
  
  canvasElement.setAttribute('width', domElement.clientWidth);
  canvasElement.setAttribute('height', domElement.clientHeight);
  
	domElement.insertBefore(canvasElement, domElement.firstChild);
  
  const draw = () => {
  	canvasElement.setAttribute('width', domElement.clientWidth);
  	canvasElement.setAttribute('height', domElement.clientHeight);
  
  	ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
    
    const cursor = [0, 0];
    let i = 0;
    
    const { x, y, width, height } = children.getBoundingClientRect();
    
    while(cursor[1] <...