JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!-- content to be placed inside <body>…</body> -->

<h1>my favorite palettes</h1>
<div id="container">
  <div id="palette-1" class="palette">
    <div class="color color-1"></div>
    <div class="color color-2"></div>
    <div class="color color-3"></div>
    <div class="color color-4"></div>
    <div class="color color-5"></div>
    <div class="color color-6"></div>
  </div>
  <div id="palette-2" class="palette">
    <div class="color color-1"></div>
    <div class="color color-2"></div>
    <div class="color color-3"></div>
    <div class="color color-4"></div>
    <div class="color color-5"></div>
    <div class="color color-6"></div>
  </div>
  <div id="palette-3" class="palette">
    <div class="color color-1"></div>
    <div class="color color-2"></div>
    <div class="color color-3"></div>
    <div class="color color-4"></div>
    <div class="color color-5"></div>
    <div class="color color-6"></div>
  </div>
  <div id="palette-4" class="palette">
    <div class="color color-1"></div>
    <div class="color color-2"></div>
    <div class="color color-3"></div>
    <div class="color color-4"></div>
    <div class="color color-5"></div>
    <div class="color color-6"></div>
  </div>
  <div id="palette-5" class="palette">
    <div class="color color-1"></div>
    <div class="color color-2"></div>
    <div class="color color-3"></div>
    <div class="color color-4"></div>
    <div class="color color-5"></div>
    <div class="color color-6"></div>
  </div>
  <div id="palette-6" class="palette">
    <div class="color color-1"></div>
    <div class="color color-2"></div>
    <div class="color color-3"></div>
    <div class="color color-4"></div>
    <div class="color color-5"></div>
    <div class="color color-6"></div>
  </div>
</div>

CSS

/**
 * The first commented line is your dabblet’s title
 */


#palette-1 .color-1 {
  background: #ddffbd;
}

#palette-1 .color-1:after {
  content: "#ddffbd";
}

#palette-1 .color-2 {
  background: #b7faa5;
}

#palette-1 .color-2:after {
  content: "#b7faa5";
}

#palette-1 .color-3 {
  background: #95e0d7;
}

#palette-1 .color-3:after {
  content: "#95e0d7";
}

#palette-1 .color-4 {
  background: #a7a5e2;
}

#palette-1 .color-4:after {
  content: "#a7a5e2";
}

#palette-1 .color-5 {
  background: #816c95;
}

#palette-1 .color-5:after {
  content: "#816c95";
}

#palette-1 .color-6 {
  background: #ff85fe;
}

#palette-1 .color-6:after {
  content: "#ff85fe";
}

#palette-1:before {
  content: "primavera";
}

#palette-2 .color-1 {
  background: #e9c698;
}

#palette-2 .color-1:after {
  content: "#e9c698";
}

#palette-2 .color-2 {
  background: #fe8856;
}

#palette-2 .color-2:after {
  content: "#fe8856";
}

#palette-2 .color-3 {
  background: #e0404b;
}

#palette-2 .color-3:after {
  content: "#e0404b";
}

#palette-2 .color-4 {
  background: #6c3f77;
}

#palette-2 .color-4:after {
  content: "#6c3f77";
}

#palette-2 .color-5 {
  background: #aa64d6;
}

#palette-2 .color-5:after {
  content: "#aa64d6";
}

#palette-2 .color-6 {
  background: #d9b5b9;
}

#palette-2 .color-6:after {
  content: "#d9b5b9";
}

#palette-2:before {
  content: "fireworks";
}

#palette-3 .color-1 {
  background: #f2eae2;
}

#palette-3 .color-1:after {
  content: "#f2eae2";
}

#palette-3 .color-2 {
  background: #ebd4b7;
}

#palette-3 .color-2:after {
  content: "#ebd4b7";
}

#palette-3 .color-3 {
  background: #f0b452;
}

#palette-3 .color-3:after {
  content: "#f0b452";
}

#palette-3 .color-4 {
  background: #d48c25;
}

#palette-3 .color-4:after {
  content: "#d48c25";
}

#palette-3 .color-5 {
  background: #6f89bf;
}

#palette-3 .color-5:after {
  content: "#6f89bf";
}

#palette-3 .color-6 {
  background: #bec3e3;
}

#palette-3 .color-6:after {
  content: "#bec3e3";
}

#palette-3:before {
 ...

JavaScript

$('h1, .color, .palette')

.each(function(i, e){
  setTimeout(function(){
    $(e).addClass('in')
  }, i * 200)
})