JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
    <h2>Stylish CSS3 Progress Bars</h2>
    <div class="progress-bar blue stripes">
        <span style="width:25%;"></span>
    </div>
    <p>Set above to:<a class="quarter" href="#">25%</a> /    <a class="half" href="#">50%</a> / <a class="three-quarters" href="#">75%</a> /    <a class="full" href="#">100%</a></p>
    
    <div class="progress-bar orange shine">
        <span style="width:50%"></span>
    </div>
    <p>Set above to:<a class="quarter" href="#">25%</a> /    <a class="half" href="#">50%</a> / <a class="three-quarters" href="#">75%</a> /    <a class="full" href="#">100%</a></p>
    
    <div class="progress-bar green glow" id="glow-progress-bar">
        <span style="width:80%;"></span>
    </div>
    <p>Set above to:<a class="quarter" href="#">25%</a> /    <a class="half" href="#">50%</a> / <a class="three-quarters" href="#">75%</a> /    <a class="full" href="#">100%</a></p>
    <h2>jQuery UI and CSS3 Progress Bars</h2>
    <div id="progressbar"></div>
  </div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $(".quarter").click(function(){
        $(this).parent().prev().children("span").css("width","25%");
      }); 
      
      $(".half").click(function(){
        $(this).parent().prev().children("span").css("width","50%");
      });
      
      $(".three-quarters").click(function(){
        $(this).parent().prev().children("span").css("width","75%");
      });
      
      $(".full").click(function(){
        $(this).parent().prev().children("span").css("width","100%");
      });
    });
    $("#progressbar").progressbar({ value: 37 });

  </script>

CSS

body {
      background: #222;
      color: #999;
      font: 13px 'trebuchet MS', Arial, Helvetica;      
    }
    
    .demo {
      width: 360px;
      margin: 20px auto;
    }
    
    h2,p {
      text-align: center;
      color: #fafafa;
      text-shadow: 0 1px 0 #111;
      margin-top: 20px;
    }
    a {
      color: #999;
    }
    
    /*============Start Progress Bar============*/
    .progress-bar {
      background-color: #1a1a1a;
      height: 25px;
      padding: 5px;
      width: 350px;
      margin: 50px 0 20px 0;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
      -webkit-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
      box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
    }
    
    .progress-bar span {
      display: inline-block;
      height: 100%;
      background-color: #777;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
      -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
      box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
      -moz-transition: width 0.4s ease-in-out;
      -webkit-transition: width 0.4s ease-in-out;
      -ms-transition: width 0.4s ease-in-out;
      -o-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;
    }
    
    /*=======blue bar=======*/
    .blue span {
      background-color: #34c2e3;
    }
    
    /*==========orange bar============*/
    .orange span {
      background-color: #fecf23;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
      background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
      background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
      background-image: -o-linear-gradient(top, #fecf23, #fd9215);
      background-image: linear-gradient(top, #fecf23, #fd9215);
    }
    
   ...