JSFiddle - React, Tailwind, and code Playground

by Fayaz Ahmed

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<script src="https://truweight.in/wp-content/themes/healthcoach/page-templates/BMI/gauge.js"></script>
<link rel="stylesheet" href="https://truweight.in/wp-content/themes/healthcoach/page-templates/BMI/odometer.css">
<script src="https://truweight.in/wp-content/themes/healthcoach/page-templates/BMI/odometer.js"></script>
<div class="container">
        <div class="card">
            <div class="card-header">
                <img src="https://2o42f91vxth73xagf92zhot2-wpengine.netdna-ssl.com/wp-content/uploads/2015/11/Logo-FIne.png" alt="Truweight" style="width: 90px;">
            </div>
            <div class="card-body">
                <div id="step1">
                    <p>Hey there, thanks for your interest. Before enrolling in a weightloss program, we recommend starting with checking your BMI and how much Kgs you need to lose.</p>
                    <div id="inpGrp" style="padding-left: 10px; padding-right: 10px;">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1"><i class="fas fa-weight"></i></span>
                            </div>
                            <input type="text" class="form-control" placeholder="Enter your weigh" aria-label="Weight" aria-describedby="basic-addon1">
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1" style="width: 42px;">
          ...

CSS

.card {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    .card-footer{
      position: fixed;
      bottom: 20;
      left: 0;
      width: 100%;
      background-color: #fff;
    }

JavaScript

var opts = {
        pointer: {
            length: 0.6, // // Relative to gauge radius
            strokeWidth: 0.035, // The thickness
            color: '#000000' // Fill color
        },
        percentColors: [
            [0.0, "#e5e577"],
            [0.50, "#ffbb00"],
            [1.0, "#b90b17"]
        ],
        colorStop: '#FFE11C', // just experiment with them
        highDpiSupport: true, // High resolution support
        generateGradient: true,
    };
    
    selectGauge = new Gauge(document.getElementById("gauge"));
    selectGauge.setOptions(opts);
    selectGauge.maxValue = 35;


    $(document).ready(function() {
        $("#btn").click(function() {

        });
    });