JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrap">   
  <div class="barGraph">
  <defs>

  
    <ul class="graph">
    
      <span class="graph-barBack">
        <li class="graph-bar" data-value="88.5" >
        </li>
      </span>  
   
    </ul>
  </div>

CSS

/* Mixings &  Variables */
.clearfix,
.clearfix:before,
.clearfix:after {
  display: block;
  content: " ";
  clear: both;
  zoom: 1;
}
/* Resets */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #EDF2F6;
  font-family: Arial;
  color: #444;
}
.wrap {
  margin: 0 auto;
  padding: 50px;
  max-width: 1200px;
}
/* Bar Graph Class */
.barGraph {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.graph {
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: calc(96%);
  left: 4%;
}
.graph-barBack {
  border-radius: 20px;
  background: #DAE4EB;
  margin-bottom: 10px;
  display: block;
  border-radius: 10px;
}
.graph-bar {
  background-image: linear-gradient(to right, #bce784,#5dd39e) ;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  border-radius: 20px;
  cursor: pointer;
  margin-bottom: 20px;
  position: relative;
  z-index: 9999;
  display: block;
  height: 20px;
  width: 0%;
}
.graph-bar:hover {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: #e4e54c;
}
.graph-bar:last-child {
  margin-bottom: 0;
}
.graph-bar:after {
  position: absolute;
  content: attr(data-value);
  display: none;
  font-size: 12px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 20px;
  height: 20px;
  padding: 0 10px;
  margin-left: 5px;
  left: 100%;
  top: 0;
}
.graph-bar:hover:after {
  display: block;
}
.graph-legend {
  position: absolute;
  margin-right: 10px;
  left: -100px;
  z-index: 9999;
  font-family: 'Verdana';
  font-style: normal;
  font-weight: bold;
  font-size: 13px;
  color: #989595;
}

JavaScript

// Produces width of .barChart
$(document).ready(function() {
  $('.graph-bar').each(function() {
     var dataWidth = $(this).data('value');
     $(this).css("width", dataWidth + "%");
  });
});