JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="content">
		<div class="main-container">
      <input type="radio" id="pink" name="colors" class="switch" checked>
      <input type="radio" id="purpure" name="colors" class="switch">
      <input type="radio" id="red" name="colors" class="switch">
      <input type="radio" id="orange" name="colors" class="switch">
      <input type="radio" id="green" name="colors" class="switch">
      <div class="error">
				<span>Your browser doesn't support a CSS Variables</span>
				<span class="error__hint">Use other browser. For example: Chrome or Firefox</span>
			</div>
			<div class="demo">
				<div class="control-panel">
					<div class="control-panel__item">
						<span class="control-panel__hint">Select color:</span>
						<label for="pink" class="select-color select-color_pink">Pink</label>
						<label for="purpure" class="select-color select-color_purpure">Purpure</label>
						<label for="red" class="select-color select-color_red">Red</label>
						<label for="orange" class="select-color select-color_orange">Orange</label>
						<label for="green" class="select-color select-color_green">Green</label>
					</div>
					<div class="control-panel__item">
						<span class="control-panel__hint">Select value:</span>
						<input class="range js-value-progress" type="range" min="0" max="100" step="5" value="55">
					</div>
				</div>
				<div class="cssui-progress js-progress">
					<progress class="cssui-progress__bar js-progress__bar" max="100" value="55"></progress>
					<span class="js-progress__value cssui-progress__value">55%</span>
				</div>
			</div>
		</div>
	</div>

CSS

/*!
 * Progress with CSS variables
 * Copyright Stas "melnik909" Melnikov (https://stas-melnikov.ru)
 * Licensed under the MIT license
 */
/* declaration variables  for demo */
:root {
  --displayError: none;
  --displayDemo: block;
  --bgColor: #F8BBD0;
  --color: #C2185B;
}

/* setting a basic font size */
@media screen and (min-width: 981px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (min-width: 641px) and (max-width: 980px) {
  html {
    font-size: 9px;
  }
}
@media screen and (max-width: 640px) {
  html {
    font-size: 8px;
  }
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", sans-serif;
  font-size: 1.6rem;
  margin: 0;
  background-color: #f0f0f0;
}

.melnik909 {
  color: #000;
  text-decoration: none;
}

.melnik909:hover, .melnik909:focus {
  text-decoration: underline;
}

.title {
  margin: 0 0 8rem;
  font-size: 3rem;
  font-weight: 300;
}

.error {
  font-size: 3rem;
  font-weight: 700;
  display: block;
  display: var(--displayError);
}

.error__hint {
  display: block;
  font-size: 1.8rem;
  margin-top: .5rem;
}

/* styles for layout */
.content {
  min-height: 100vh;
  padding-bottom: 8rem;
  box-sizing: border-box;
  position: relative;
}

.main-container {
  min-width: 100px;
  max-width: 800px;
  padding-top: 6rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer {
  text-align: center;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
}

.demo {
  display: none;
  display: var(--displayDemo);
}

/* control-panel */
.control-panel {
  display: flex;
  justify-content: center;
  margin-bottom: 8rem;
}

@media screen and (max-width: 640px) {
  .control-panel {
    flex-direction: column;
    align-items: center;
  }
}
.control-panel__item {
  display: flex;
  align-items: center;
  margin-right: 2%;
}

@media screen and (max-width: 640px) {
 ...

JavaScript

// change progress value

(function(){

			var progress = document.querySelector(".js-progress"),
			progressBar = progress.querySelector(".js-progress__bar"),
			progressValue = progress.querySelector(".js-progress__value");

			document.querySelector(".js-value-progress").addEventListener("change", function(){

				progressBar.value = this.value;
				progressValue.textContent = this.value + "%";

			});

		})();

// Google analytics

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-88245096-1', 'auto');
  ga('send', 'pageview');