JSFiddle - React, Tailwind, and code Playground

by refreshfr

HTML

<label class="day-night-toggle">
  <input type="checkbox">
  <span class="toggle">
    <span class="clouds-back">
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
    </span>
    <span class="stars">
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
      <span class="star"></span>
    </span>
    <span class="sun-rays"></span>
    <span class="sun">
      <span class="moon"></span>
    </span>
    <span class="clouds-front">
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
      <span class="cloud"></span>
    </span>
  </span>
</label>

SCSS

:root {
  /* User-settings */
  --toggle-width: 560px;
  --toggle-height: 240px;
  --transition-duration: 500ms;
  
  /* Calculations for nerds */
  --sun-size: calc(0.8 * var(--toggle-height));
  --sun-margin: calc((var(--toggle-height) - var(--sun-size)) / 2);
  --moon-margin: calc(var(--toggle-width) - var(--sun-margin) - var(--sun-size));
  --ray-size: calc(0.35 * var(--sun-size));
  --ray-opacity: 0.1;
}


body {
  background: #d1d9e7;
}

.day-night-toggle {
  
  .toggle {
    width: var(--toggle-width);
    height: var(--toggle-height);
    border-radius: var(--toggle-height);
    padding: 0;
    display: block;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-duration) ease-in-out;
    /**/
    overflow: hidden;
    /**/
    
    /* Apply transition to all childs */
    & * {
      transition: all var(--transition-duration) ease-in-out;
    }
    
    /* Sky */
    box-shadow: inset 0px 11px 17px -8px rgba(0, 0, 0, 0.66), inset 0px -11px 5px -8px rgba(255, 255, 255, 0.94);
    
    .sun {
      position: absolute;
      width: var(--sun-size);
      height: var(--sun-size);
      border-radius: var(--sun-size);
      top: var(--sun-margin);
      left: var(--sun-margin);
      background: #f1c426;
      box-shadow: inset 8px 11px 17px -8px rgba(255, 255, 255, 0.94), inset -3px -11px 5px -8px rgba(0, 0, 0, 0.66), 5px 5px 15px -2px rgba(0, 0, 0, 0.4);
      overflow: hidden;
      
      .moon {
        position: absolute;
        width: var(--sun-size);
        height: var(--sun-size);
        border-radius: var(--sun-size);
        top: 0;
        left: 0;
        background: #c3c9d4;
        box-shadow: inset 8px 11px 17px -8px rgba(255, 255, 255, 0.94), inset -3px -11px 5px -8px rgba(0, 0, 0, 0.66), 5px 5px 15px -2px rgba(0, 0, 0, 0.4);
        
        --crater1: radial-gradient(circle, #979eb3 20%, transparent 21%);
        --crater2: radial-gradient(circle, #979eb3 10%, transparent 11%);
        --crater3:...