JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div class="toggle"></div>

CSS

body.night {
  background: #00151f;
  color: #fff;
}

.toggle {
  position: absolute;
  top: 40px;
  left: 0px;
  background: #fff;
  border: 2px solid #00151f;
  width: 45px;
  height: 20px;
  cursor: pointer;
  border-radius: 20px;
  transition: 0.5s;
}

.toggle.active {
  background: #00151f;
  border: 1px solid #fff;
}

.toggle:before {
  left: 0px;
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #00151f;
  border-radius: 50%;
  transition: 0.5s;
}

.toggle.active:before {
  left: 27px;
  background: #fff;
}

JavaScript

jQuery(document).ready(function($) {
  $(".toggle").click(function() {
    $(".toggle").toggleClass("active");
    $("body").toggleClass("night");
    $.cookie("toggle", $(".toggle").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".toggle").addClass("active");
    $("body").addClass("night");
  }
});