JSFiddle - React, Tailwind, and code Playground

by Ritwika Das

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>EXAMPLE | Finance Calculator</title>
    <!-- Rendering for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- jQuery UI JS -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- Touchscreen functionality -->
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <!-- jQuery UI CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  </head>

  <body>

    <div class="brand-cms__container">
      <div class="std">
        <div class="calcOutter">
          <div class="calcInner">
            <p class="financeDescription">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <span class="titleAccent">standard dummy text ever since the 1500s</span>
            </p>

            <h2 class="financeTitle">CHOOSE YOUR BUDGET</h2>
            <p class="financeLegend">What is the total value of your order?</p>
            <form>
              <span class="input-pound">
                    <input type="number" id="input-financeAmount" min="400" max="2000" maxlength="4" oninvalid="setCustomValidity('Available for orders between £400 and £2000')"     onchange="try{setCustomValidity('')}catch(e){}"/>    
                    </span>
              <input type="button" value="UPDATE" id="update_financeAmount" />
            </form>
            <h2 class="financeTitle">CHOOSE THE NUMBER OF MONTHLY REPAYMENTS</h2>
            <br>

            <div id="monthPick_slider"></div>
          </div>
          <div class="calcInner">
            <h2 class="financeSummary-titlte">Your personalised plan</h2>
            <div class="financeAttribute-one">
              <span...

CSS

/*************************************************************
FINANCE CALCULATOR | Construction
*************************************************************/

.calcOutter {
  display: -webkit-flex;
  display: flex;
  margin: auto;
  border: 1px solid #dad7d6;
}

.calcInner {
  flex-grow: 1;
  width: calc( 50% - 15px);
  position: relative;
}

.calcInner:nth-child(2) {
  background-color: #f5f5f5;
  padding: 0px 10px;
}


/*************************************************************
FINANCE CALCULATOR | Frame 1
*************************************************************/

p.financeDescription {
  font-family: 'FuturaBT-Book', Arial, Helvetica, sans-serif;
  color: #5f5f5e;
  font-size: 20px;
  margin-bottom: 5px;
}

span.titleAccent {
  font-weight: bold;
  font-family: 'FuturaBT-Medium', Arial, Helvetica, sans-serif;
}

h2.financeTitle {
  font-size: 18px;
  font-family: 'FuturaBT-Medium', Arial, Helvetica, sans-serif;
  margin-bottom: 5px;
  margin-top: 25px;
}

p.financeLegend {
  color: #5f5f5e;
  margin-bottom: 15px;
}

span.input-pound {
  position: relative;
  float: left;
  width: 67%;
  margin-right: 1%;
  border: 1px solid #dad7d6;
  padding: 7px 2% 7px 22px;
}

.input-pound:before {
  position: absolute;
  left: 5px;
  content: "£";
  font-size: 24px;
}

input#input-financeAmount {
  -webkit-appearance: textfield;
  background-color: white;
  border: none;
  width: 100%;
  font-size: 24px;
}

#update_financeAmount {
  background: #323470;
  color: #fff;
  padding: 12px 8.5%;
  border: 1px solid #323470;
  font-size: 16px;
}


/* Tooltip & Slider styling */

.tooltip_Date {
  position: absolute;
  padding: 5px;
  font-size: 12px;
  top: 130%;
  margin-left: -2.2em;
  outline: none;
}

.tooltip_Date .tooltip_Date-arrow {
  top: 0;
  left: 50%;
  margin-left: -6px;
  border-bottom: 5px solid #dad7d6;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
}

.tooltip_Date-inner {
  max-width: 200px;
 ...