JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="main-content" class="colorTheme1">
  <div id="color-theme-switcher">
    <button id="colorTheme1" class="active">History</button>
    <button id="colorTheme2">Math</button>
    <button id="colorTheme3">Nat. Science</button>
    <button id="colorTheme4">Language</button>
    <button id="colorTheme5">
		Religion
		</button>
		<button id="colorTheme6">
		Chemistry / Physics
		</button>
		<button id="colorTheme7">
		Medienwissen
		</button>
  </div>

  <div id="main">
    <article>
      <h2>
        Minimized quick check
      </h2>
      <p class="body1 neparagraph">
        Maecenas enim quam, rhoncus ac leo non, porta iaculis turpis. Mauris blandit non erat sed ultricies. Maecenas maximus condimentum turpis, vitae dapibus lorem blandit a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed in ante leo. Nunc finibus semper metus eget vestibulum. Integer at viverra tortor. In at nunc sed arcu pretium fermentum.
      </p>
      <div class="quiz-container minimized inactive bgColor4">
        <div class="quiz-content bgColor4">
          <h3 class="headline2">
            Headline
          </h3>
          <div class="quiz-tags">
            <div class="quiz-tag">
              tag1
            </div>
            <div class="quiz-tag">
              tag2
            </div>
          </div>
          <p class="body1 neparagraph">
            Maecenas enim quam, rhoncus ac leo non, porta iaculis turpis. Mauris blandit non erat sed ultricies. Maecenas maximus condimentum turpis, vitae dapibus lorem blandit a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            Vestibulum...

SCSS

$factBoxBg: #e6e6e6;
$textColor: #323232;
$newGreenBtn: #40823a;
$standardBorderColor: #dadada;
$standardBgColor: #fafafa;

//colorTheme1
	$colorTheme1bgColor2: #bc2f2d;
	$colorTheme1bgColor3: #ffa736;
	$colorTheme1bgColor4: #4aaf57;
	$colorTheme1bgColor4thin: #e8f3e7;
//colorTheme2	
	$colorTheme2bgColor2: #3087A5;
	$colorTheme2bgColor3: #4FB9A3;
	$colorTheme2bgColor4: #977DB7;
	$colorTheme2bgColor4thin: #efecf4;
//colorTheme3
	$colorTheme3bgColor2: #3C8E44;
	$colorTheme3bgColor3: #18BDD4;
	$colorTheme3bgColor4: #FFA736;
	$colorTheme3bgColor4thin: #fbeedd;
//colorTheme4
	$colorTheme4bgColor2: #7A6893;
	$colorTheme4bgColor3: #18BDD4;
	$colorTheme4bgColor4: #4FB9A3;
	$colorTheme4bgColor4thin: #e5f0ed;
//colorTheme5
	$colorTheme5bgColor2: #C07F2B;
	$colorTheme5bgColor3: #FFC23B;
	$colorTheme5bgColor4: #977DB7;
	$colorTheme5bgColor4thin: #ebe7f0;
//colorTheme6
	$colorTheme6bgColor2: #0C909A;
	$colorTheme6bgColor3: #FFA736;
	$colorTheme6bgColor4: #4FB9A3;
	$colorTheme6bgColor4thin: #e1f0ed;
//colorTheme7
	$colorTheme7bgColor2: #C44827;
	$colorTheme7bgColor3: #4FB9A3;
	$colorTheme7bgColor4: #FFA736;
	$colorTheme7bgColor4thin: #fbeedd;
	
@mixin colorTheme($color1, $color2) {
	.quiz-container {
			&.bgColor4 {
				&:before,
				&:after {
					background-color: rgba($color2, .15);
				}
			}
		}

		.quiz-content {
			&.bgColor4 {
				background-color: rgba($color2, .15);
			}
		}

		.quiz-box {
			&.bgColor4 {
				background-color: $color2;
			}
			&.bgColor3 {
				background-color: $color1;
			}
		}

		.quiz-container-line {
			&.bgColor4 {
				border-top: 3px solid $color2;
			}
		}

		.quiz-container-button {
			&.bgColor4 {
				background-color: $color2;
			}
		}

		.quiz-box-logo {
			&.bgColor4 {
				background-color: rgba($color2, 0.9);
			}
			&.bgColor3 {
				background-color: rgba($color1, 0.9);
			}
			&.color3 {
				color: $color1 !important;
			}
			&.color4 {
				color: $color2 !important;
			}
		}
	}

.colorTheme1 {
	@include colorTheme($color1:...

JavaScript

$('.quiz-container-button').click(function() {
  $(this).parent().parent('.quiz-container').toggleClass('inactive');
});

$('.quiz-box').click(function() {
  $(this).toggleClass('custom-overlay');
	var logo = $(this).find('.quiz-box-logo');
	if (logo.hasClass('color3')) {
		logo.addClass('bgColor3').removeClass('color3');
		return;
	}
	if (logo.hasClass('bgColor3')) {
		logo.addClass('color3').removeClass('bgColor3');
		return;
	}
	if (logo.hasClass('color4')) {
		logo.addClass('bgColor4').removeClass('color4');
		return;
	}
	if (logo.hasClass('bgColor4')) {
		logo.addClass('color4').removeClass('bgColor4');
		return;
	}
});

$('#color-theme-switcher').children('button').click(function() {
  var colorName = $(this).attr('id');
  $('#main-content').attr('class', colorName);
  $(this).toggleClass('active');
  $(this).siblings().removeClass('active');
});