JSFiddle - React, Tailwind, and code Playground

HTML

<div class="roundDifficulty">
						<p class="fieldHeader">Difficulty</p>
				    	<div class="difficultyLevel">
					    	<div class="switch">
						    	<input id="toggle1" class="toggle easy" type="checkbox" name="easy" checked="true" />
						    	<label for="toggle1">
									<span class="switch-label">Easy</span>
								</label>
							</div>
							<div class="switch">
						    	<input id="toggle2" class="toggle medium" type="checkbox" name="medium" checked="true" />
						    	<label for="toggle2">
									<span class="switch-label">Medium</span>
								</label>	
							</div>
							<div class="switch">
						    	<input id="toggle3" class="toggle hard" type="checkbox" name="hard" checked="true" />
						    	<label for="toggle3">
									<span class="switch-label">Hard</span>
								</label>
							</div>
						</div>				
					</div>

SCSS

$primaryRed: #ae463d;
$primaryGreen: #1AA513;
$yellowish: #cda665;
$colorWhite: #fffeff;
$lightBrown: #ad9e8b;
$lightBrownBorderColor: #ad9e8b;
$colorBlack: #000000;
$darkBrown: #474340;

@mixin standardTransition($standardDuration) {
      -webkit-transition: all $standardDuration cubic-bezier(0.915, 0.010, 0.075, 0.995);
         -moz-transition: all $standardDuration cubic-bezier(0.915, 0.010, 0.075, 0.995);
           -o-transition: all $standardDuration cubic-bezier(0.915, 0.010, 0.075, 0.995);
              transition: all $standardDuration cubic-bezier(0.915, 0.010, 0.075, 0.995);
}

.roundDifficulty {
	display: grid;
	grid-template-columns: 1fr;

	.difficultyLevel {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;

		.switch { 
			height: 63px;
			width: 100%;
			overflow: hidden;
			position: relative;
			display: inline-block;
			margin: 0;
			padding: 0;

			.switch-label {
				width: 100%;
				font-size: 16px;
				text-align: center;
				color: $darkBrown;
				position: absolute;
				bottom: -2px;
				left:0;
				right:0;
			}
		}

		input.toggle {
  			visibility: hidden;
  
  			& + label {
			    width: 3rem;
			    border-radius: 4rem;
			    visibility: visible;

			    &:hover {
			    	cursor: pointer
			    }
  			}

  			&:disabled + label:before { // bg element
    			background-color: rgba($colorBlack, 0.1);

    			&.dark,
    			 .dark & {
    				background-color: rgba($colorWhite, 0.075) 
    			}
    		}

  			&:disabled + label:after { // circle
    			background-color: #F5F5F5;
    			box-shadow: 0 0.1rem 0.1rem 0rem rgba($colorBlack, 0.2);

	    		&.dark,
	    		 .dark & {
	    		 	background-color: rgb(70,70,70) 
	    		}
    		}
		}

		input.toggle + label:before,
		input.toggle + label:after {
	 		display: block;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			content: "";
		}

		input.toggle + label:before {
			right: 20px;
			left: 20px;
			top: 0.8rem;
			bottom: 1.8rem;
			border-radius:...