JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

<div class="container">
  <h1>Heading 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis magnam molestiae labore consequatur natus atque molestias consequuntur quis asperiores reprehenderit tenetur nostrum saepe qui porro, temporibus fuga quibusdam nulla facere!</p>
  
  <div>
    <button class="btn btn-success">Add</button>
    <button class="btn btn-info">Edit</button>
    <button class="btn btn-danger">Delete</button>
  </div>
  
  <hr>
  
  <h2>Heading 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis magnam molestiae labore consequatur natus atque molestias consequuntur quis asperiores reprehenderit tenetur nostrum saepe qui porro, temporibus fuga quibusdam nulla facere!</p>
  
  <div>
    <button class="btn btn-success">Add</button>
    <button class="btn btn-info">Edit</button>
    <button class="btn btn-danger">Delete</button>
  </div>
</div>

<div class="confetti-particles"></div>

SCSS

$colors: [red, green, blue, orange, yellow];
@each $color in $colors {
  .u-color-#{$color} {
    background-color: $color;
  }
}

.confetti {
  top: 0;
  height: 10px;
  width: 5px;
  display: block;
  position: fixed;
  pointer-events: none;
}

JavaScript

const colors = ['red', 'green', 'blue', 'orange', 'yellow'];
const container = document.querySelector('.confetti-particles');

_.range(200).forEach((e, i) => {
	const div = document.createElement('DIV');
  div.classList.add('confetti', `u-color-${_.sample(colors)}`);
  div.style.left = `${i * 20}px`;
	container.appendChild(div)
})