JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="grid">
    <div class="grid-cell">
        <div class="flex">
            <h1>My Awesome Title</h1>
            <div class="check">
                <input type="checkbox" id="switch"> <label for="switch"></label>
            </div>
        </div>
        <p>My awesome description. Suspendisse molestie gravida nisl nec convallis. Sed dignissim at leo vitae dapibus. Pellentesque dignissim lacus malesuada erat fermentum, id dictum erat vulputate. Fusce ac ex turpis. Nullam leo mi, pulvinar et urna nec,
            aliquet consequat ligula. Cras vestibulum magna nec ex tincidunt posuere. Nullam urna magna, mollis vel lorem ut, pellentesque tincidunt nisl. Proin sodales fermentum viverra.</p>
    </div>
</div>





<div class="grid">
  
  <div class="grid-cell">
    <p>
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias tenetur inventore illo adipisci tempore. Excepturi tempore iure, odit consequatur minima quis, vel? Recusandae et deserunt vero similique ducimus ex, earum.
</p>
  </div>
</div>

<div class="grid">
  <div class="grid-cell">
    <h1>some heading</h1>
<p>some other paragraph</p>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
    margin: 0;
    transition: all 0.3s ease-in-out;
}

html {
    font-family: "Montserrat", sans-serif;

    --background: #eeeeee;
    --content-bg: #f9f9f9;
    --title: #ff34a1;
    --text: #333333;
}

html[data-theme="dark"] {
    --background: #212121;
    --content-bg: #333333;
    --title: #ff55aa;
    --text: #f6f6f6;
}


body {
    min-height: 100vh;
    background: var(--background);
}

.grid {
    display: grid;
    background: var(--background);
    grid-template-columns: auto 70% auto;
    grid-template-rows: auto;
    /* height: 100vh; */
    grid-template-areas: ". content .";
  margin: 20px 0;
    &-cell {
        padding: 30px;
        grid-area: content;
        align-self: center;
        background: var(--content-bg);
        border-radius: 10px;
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    }
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

h1 {
    color: var(--title);
}

p {
    color: var(--text);
    text-align: justify;
    line-height: 1.8;
}

.check {
    height: 30px;
    width: 50px;
    border-radius: 100px;
    position: relative;
    overflow: hidden;

    input[type=checkbox] {
        height: 0;
        width: 0;
        visibility: hidden;
    }

    label {
        cursor: pointer;
        width: 100%;
        height: 100%;
        background: var(--background);
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    label::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    }

    input:checked + label {
        background: var(--title);
   ...

JavaScript

$('#switch').on('change', function() {
  if ($(this).is(':checked')) {
    $('html').attr('data-theme', 'dark');
  } else {
    $('html').attr('data-theme', 'light');
  }
});