JSFiddle - React, Tailwind, and code Playground

by akogch

HTML

<input type="radio" id="invert0" name="invert">
<input type="radio" id="invert1" name="invert">
<article>
  <label for="invert0" class="bucket">
		<span class="sr">Light</span>
	</label>
  <label for="invert1" class="bucket">
		<span class="sr">Dark</span>
	</label>
  <section>
    <h1>Excerpt from <em>Cat Ipsum</em></h1>
    <p>Throwup on your pillow stare at wall turn and meow stare at wall some more meow again continue staring, yet destroy the blinds. Chew on cable i heard this rumor where the humans are our owners, pfft, what do they know?! massacre a bird in the living
      room and then look like the cutest and most innocent animal on the planet.</p>
    <p>Make it to the carpet before i vomit mmmmmm present belly, scratch hand when stroked or kitty power but jump up to edge of bath, fall in then scramble in a mad panic to get out. Peer out window, chatter at birds, lure them to mouth hide head under
      blanket so no one can see fat baby cat best buddy little guy.</p>
    <h2>On Caturday</h2>
    <p>Grab pompom in mouth and put in water dish who’s the baby, so shred all toilet paper and spread around the house bring your owner a dead bird, for if it fits i sits licks paws stare out the window. At four in the morning wake up owner meeeeeeooww
      scratch at legs and beg for food then cry and yowl until they wake up at two pm jump on window and sleep while observing the bootyful cat next door.</p>
    <img src="https://humoropedia.com/wp-content/uploads/2014/11/Caturday-All-For-One-One-For-All.jpg" alt="Caturday. All for one, one for all" width="550" height="392">
    <p>Jumps off balcony gives owner dead mouse at present then snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over
      the food dish cat slides down the water slide and into pool and swims even though it does not like water scratch chase after silly...

CSS

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: calc(16px + (20 - 16)*(100vw - 320px)/(1024 - 320));
  --bgColor: hsl(0, 0%, 100%);
  --pColor: hsl(0, 0%, 0%);
  --transDur: 1s;
}

body {
  font: 1em "Hind", sans-serif;
  line-height: 1.5;
}

input[name=invert] {
  position: fixed;
  top: 0;
  left: -1.5em;
}

h1,
h2 {
  font-family: "Ubuntu", sans-serif
}

h1 {
  font-size: 2em;
  line-height: 1.5;
  margin-bottom: .75em
}

h2 {
  font-size: 1.5em;
  line-height: 1;
  margin-bottom: 1em
}

p,
img {
  margin-bottom: 1.5em
}

img {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 9;
}

article {
  background: var(--bgColor);
  color: var(--pColor);
  padding: 1.5em;
  transition: all 0s var(--transDur) linear;
}

section {
  position: relative;
  margin: auto;
  max-width: 36em;
}

.bucket,
.paint {
  position: fixed;
}

.bucket {
  background-color: transparent;
  background-image: radial-gradient(4em 2.5em at 50% 0, currentColor 48%, transparent 50%);
  border-radius: 0 0 0.75em 0.75em;
  box-shadow: 0 0 0 0.25em inset;
  color: inherit;
  cursor: pointer;
  opacity: 0.5;
  top: 1.5em;
  right: 1.5em;
  width: 2.5em;
  height: 2.5em;
  transition: opacity 0.15s linear, transform 0.15s 0.15s linear;
  z-index: 10;
}

.bucket:before {
  background-color: currentColor;
  border-radius: 0 0 0.375em 0.375em;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0.375em;
  height: 1.25em;
  transition: transform 0.3s ease-in;
  transform: rotate(45deg) scaleY(0);
  transform-origin: 0 0;
}

.bucket:hover,
input[name=invert]:focus~article .bucket {
  opacity: 1;
  transform: rotate(-45deg);
}

.bucket:hover:before,
input[name=invert]:focus~article .bucket:before {
  transform: rotate(45deg) scaleY(1);
}

.sr {
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 0;
}

.paint {
  background-image: radial-gradient(25% 10% at 20% 82%, var(--bgColor) 82%, transparent...