JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<!-- Light theme -->
<label class="theme-selector theme-selector--light">
  <input class="theme-selector__radio" checked type="radio" name="theme-selector" value="light" />
  <div class="theme-selector__indicatior"></div>
  <div class="theme-selector__outline"></div>
  <div class="theme-selector__nav">
    <div class="theme-selector__search"></div>
  </div>
  <div class="theme-selector__body">
    <div class="theme-selector__col"></div>
    <div class="theme-selector__col--center">
      ~ ~ ~ ~ ~
      <div class="theme-selector__posts"></div>
    </div>
    <div class="theme-selector__col"></div>
  </div>
</label>
<!-- Night theme -->
<label class="theme-selector theme-selector--night">
  <input class="theme-selector__radio" type="radio" name="theme-selector" value="night" />
  <div class="theme-selector__indicatior"></div>
  <div class="theme-selector__outline"></div>
  <div class="theme-selector__nav">
    <div class="theme-selector__search"></div>
  </div>
  <div class="theme-selector__body">
    <div class="theme-selector__col"></div>
    <div class="theme-selector__col--center">
      ~ ~ ~ ~ ~
      <div class="theme-selector__posts"></div>
    </div>
    <div class="theme-selector__col"></div>
  </div>
</label>
<!-- Aubergine theme -->
<label class="theme-selector theme-selector--aubergine">
  <input class="theme-selector__radio" type="radio" name="theme-selector" value="aubergine" />
  <div class="theme-selector__indicatior"></div>
  <div class="theme-selector__outline"></div>
  <div class="theme-selector__nav">
    <div class="theme-selector__search"></div>
  </div>
  <div class="theme-selector__body">
    <div class="theme-selector__col"></div>
    <div class="theme-selector__col--center">
      ~ ~ ~ ~ ~
      <div class="theme-selector__posts"></div>
    </div>
    <div class="theme-selector__col"></div>
  </div>
</label>

CSS

.theme-selector--light {
  --theme-background: #f9f9fa;
  --theme-color: #0a0a0a;
  --theme-top-bar-background: #fdf9f3;
  --theme-top-bar-search-background: #e8e7e7;
  --theme-container-background: #fff;
  --theme-container-border: 1px solid #d6d6d6;
}

.theme-selector--night {
  --theme-background: #161f2b;
  --theme-color: #fff;
  --theme-top-bar-background: #141d26;
  --theme-top-bar-search-background: #424a54;
  --theme-container-background: #27374c;
  --theme-container-border: 1px solid #141d26;
}

.theme-selector--aubergine {
  --theme-background: #411934;
  --theme-color: #F6F6F5;
  --theme-top-bar-background: #2C001E;
  --theme-top-bar-search-background: #C8A6C5;
  --theme-container-background: #7E5273;
  --theme-container-border: 1px solid #2C001E;
}

* {
  box-sizing: border-box;
}

.theme-selector {
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: var(--theme-container-border);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin: 15px;
  width: 192px;
  height: 108px;
  border-radius: 10px;
}

.theme-selector:hover,
.theme-selector:focus {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.theme-selector * {
  pointer-events: none;
}

.theme-selector__radio:focus~.theme-selector__outline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #4D90FE;
  transform: scale(1.1);
}

.theme-selector__radio,
.theme-selector__indicatior {
  position: absolute;
  opacity: 0;
}

.theme-selector__indicatior {
  height: 1em;
  width: 1em;
  top: 0.5em;
  right: 0.5em;
  border-radius: 1em;
  background: green;
  border: 0.1em solid darkgreen;

}

.theme-selector__nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 20px;
  width: 192px;
  background: var(--theme-top-bar-background);
  border-bottom: var(--theme-container-border);
  border-radius:...