JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="card-wrapper light">
  <div class="card">
    <div class="card-header">
      <h1>My Awesome Title</h1>
      <label class="switch">
      <input type="checkbox">
       <span class="slider round"></span>
        </label>
    </div>
    <div class="card-body">
      <p class="card-body-description">My awesome description. Suspendisse molestie gravida nisl nec convallis. My awesome description. Suspendisse molestie gravida nisl nec convallis.</p>
    </div>
  </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
}

.dark {
  background-color: #20262E !important;

  .card {
    background-color: #333333 !important;
    color: #fff;
    box-shadow: 1px 1px 2px 2px #2b2b2b !important;
  }
}

.card-wrapper.light {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #ddd;

  .card {
    max-width: 70%;
    border-radius: 15px;
    padding: 30px;
    background-color: #fff;
    box-shadow: 1px 1px 2px 2px #ccc;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      h1 {
        color: #FE5BAC;
      }

      .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ddd;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      .slider::before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      input:checked + .slider {
        background-color: #FE5BAC;
      }

      input:focus+.slider {
        box-shadow: 0 0 1px #FE5BAC;
      }

      input:checked + .slider::before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }

      .slider.round {
        border-radius: 34px;
      }

      .slider.round::before {
        border-radius: 50%;
      }
    }

    .card-body {

      p {
          line-height: 1.6;
          transition: none;
        }
    }
  }
}

JavaScript

$(document).ready(function() {
   $('input[type="checkbox"]').click(function() {
     if ($(this).is(":checked")) {
       $('.card-wrapper').addClass("dark");
     } else {
       $('.card-wrapper').removeClass("dark");
     }
   });
 });