JSFiddle - React, Tailwind, and code Playground

by secretgspot

SCSS

html, body {
  position: relative;
  height: 100%;
  background-color: rgb(94,212,242);
  @include filter-gradient(#5ed4f2, #02457f, vertical);
  @include background-image(linear-gradient(top, rgba(94,212,242,1) 0%,rgba(2,69,127,1) 94%));
  margin:0;padding:0;
}
body {
  top: 0;
  bottom: auto;
  height: 75%;
  z-index: 1000;
  box-shadow: 0px 0px 10px rgba(254,252,234,1);
  background-color: rgb(1,74,127);
  //-webkit-filter: brightness(0.2) grayscale(1);
  //animation: darken-sky 60s infinite alternate;
  @include filter-gradient(#014a7f, #d8b688, vertical);
  @include background-image(linear-gradient(top,  rgba(1,74,127,1) 0%,rgba(1,72,124,1)   0%,rgba(1,83,139,1) 7%,rgba(0,100,152,1) 15%,rgba(0,118,166,1) 23%,rgba(0,115,169,1) 23%,rgba(0,118,168,1) 23%,rgba(1,118,172,1) 23%,rgba(0,114,166,1) 23%,rgba(0,118,168,1) 23%,rgba(0,130,179,1) 30%,rgba(0,132,180,1) 30%,rgba(2,147,192,1) 37%,rgba(7,145,192,1) 37%,rgba(9,147,194,1) 37%,rgba(10,146,194,1) 37%,rgba(9,154,199,1) 37%,rgba(0,142,188,1) 37%,rgba(51,163,203,1) 44%,rgba(44,162,198,1) 44%,rgba(43,159,200,1) 44%,rgba(46,159,199,1) 44%,rgba(46,164,202,1) 44%,rgba(76,175,206,1) 51%,rgba(74,173,205,1) 51%,rgba(82,175,208,1) 51%,rgba(77,176,207,1) 51%,rgba(109,187,209,1) 58%,rgba(104,186,207,1) 58%,rgba(139,200,205,1) 65%,rgba(136,196,204,1) 65%,rgba(138,199,204,1) 65%,rgba(163,203,195,1) 71%,rgba(158,199,193,1) 71%,rgba(161,202,198,1) 71%,rgba(159,199,191,1) 71%,rgba(177,200,180,1) 77%,rgba(179,204,183,1) 77%,rgba(180,204,182,1) 77%,rgba(178,203,182,1) 77%,rgba(176,201,180,1) 77%,rgba(192,195,164,1) 83%,rgba(195,199,166,1) 83%,rgba(194,197,166,1) 83%,rgba(211,182,140,1) 89%,rgba(209,185,141,1) 89%,rgba(208,179,135,1) 89%,rgba(215,183,136,1) 95%,rgba(213,181,134,1) 95%,rgba(213,179,133,1) 100%,rgba(213,179,133,1) 100%,rgba(216,182,136,1) 100%));
  
  // sun
  &:after {
      content: '';
      display: block;
      position: absolute;
      opacity: 0.6;
      bottom: 0px;
      z-index: -10;
      left: 50%;
     ...