JSFiddle - React, Tailwind, and code Playground

by Pralhad Sonar

HTML

<div class="section clearfix">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row ipad-mini-cirlces">
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#5cb85c" data-thickness=".1" value="20%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>10-30%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Saved through improved workflow processes <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a></label>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#5bc0de" data-thickness=".1" value="7.5%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>5-10%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Savings on current cost of reusing of original production material <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a></label>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-4">
            <div class="knob-container">
              <input class="knob" data-fgcolor="#d9534f" data-thickness=".1" value="15%" data-displayInput="false" data-readOnly="true">
              <div class="knob-text">
                <span>10-20%</span>
              </div>
              <div class="knob-text circle-text">
                <label>Savings through a more polished preparation ahead of the edit <a href="http://bframe.com/software/security/roi-cost-savings/">Find Out More</a></label>
              </div>
            </div>
          </div>
        </div>
        <br>
        <div class="row...

CSS

@media (min-width: 768px) and (max-width: 1024px) {
  .ipad-mini-cirlces {
    margin-bottom: 100px;
  }
}

@media (min-width: 1200px) {
  .knob-container canvas {
    width: 100px;
    height: 100px;
  }
}

.circle-text {
  margin-left: 107px;
  width: 200%;
  margin-top: -40px;
  text-align: left;
}

@media (max-width: 479px) {
  .circle-text {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 100px;
    text-align: left;
  }
}

@media (max-width: 479px) {
  .knob-container {
    margin: 27px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /*margin-left: 60px;*/
  }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .circle-text {
    margin-left: -20px;
    width: 160%;
    margin-top: 114px;
    text-align: left;
  }
}

.knob-container canvas {
  margin-left: 20%;
}