JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<html>
<head>
  <style>
  * {
    box-sizing: border-box;
  }
  body {
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
  }
  /* Style the input fields */
  input {
    padding: 15px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 2px solid #aaaaaa;
  }
  /* Style the slider */
  .sliders {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 8px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.8;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  .sliders:hover {
    opacity: 1;
  }
  
  .sliders2 {
    -webkit-appearance: none;
    width: 100px;
    height: 13px;
    font-size: 13px;
    border-radius: 8px;
    outline: none;
    
    opacity: 0.8;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  .sliders2:hover {
    opacity: 1;
  }
  /* Style the result-container */
  .result-container {
    font-family: Raleway;
    background-color: #0d5899;
    padding: 2px;
    margin-top: 0px;
    width: 100%;
    text-align: center;
    color: white;
  }
  /* Style the output text */
  #output {
    font-family: Raleway;
    font-size: 40px;
    text-align: center;
  }
  
  #output2 {
    font-family: Raleway;
    font-size: 20px;
    text-align: center;
  }
  </style>
</head> 
<body>
<div class="result-container">
  <p><span id="output"></span> <strong>XEN</strong></p>
  <p>≈ <span id="output2"></span></p>
</div>
<!-- Slider main container -->
<br>
<div class="sliders-container">
  <!-- Input field 1 -->
  <b>VMUs</b> (1-128): <input type="number" class="sliders2" min="1" max="128" value="1" id="vmu">
  <input type="range" min="1" max="128" value="1" class="sliders" id="VMUs">
  <!-- Input field 2 -->
<p></p>  <b>Mint Term</b> (1-1000): <input type="number" class="sliders2" min="1" max="1000" value="1000" id="mintTerm">
  <input type="range" min="1" max="1000" value="400" class="sliders" id="mintTermSlider">
  <!-- Input field 3 -->
<p></p>  <b>cRank...