JSFiddle - React, Tailwind, and code Playground

HTML

<!-- css bar graph -->
<div class="css_bar_graph">

  <!-- y_axis labels -->
  <ul class="y_axis">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

  <!-- x_axis labels -->
  <ul class="x_axis">
    <li>2011</li>
    <li>2010</li>
    <li>2009</li>
    <li>2008</li>
  </ul>

  <!-- graph -->
  <div class="graph">
    <!-- grid -->
    <ul class="grid">
      <li>
        <!-- 10 -->
      </li>
      <li>
        <!-- 9 -->
      </li>
      <li>
        <!-- 8 -->
      </li>
      <li>
        <!-- 7 -->
      </li>
      <li>
        <!-- 6 -->
      </li>
      <li>
        <!-- 5 -->
      </li>
      <li>
        <!-- 4 -->
      </li>
      <li>
        <!-- 3 -->
      </li>
      <li>
        <!-- 2 -->
      </li>
      <li>
        <!-- 1 -->
      </li>
      <li class="bottom">
        <!-- 0 -->
      </li>
    </ul>

    <!-- bars -->
    <!-- 250px = 100% -->
    <ul>
      <li class="bar nr_1 orange" style="height: 24px;">
        <div class="top"></div>
        <div class="bottom"></div><span>9.500kg</span></li>

    </ul>
  </div>

</div>

CSS

body {
  margin: 50px;
  padding: 0px;
  background-color: #eeeeee;
}


/* ==================== BAR GRAPH  ==================== */


/* ------ container ------ */

div.css_bar_graph {
  width: 580px;
  height: 320px;
  padding: 40px 20px 10px 70px;
  /* --- font --- */
  font-size: 13px;
  font-family: arial, sans-serif;
  font-weight: normal;
  color: #444444;
  background-color: #ffffff;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #d5d5d5;
  /* --- css3 --- */
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}


/* ------ hyperlinks ------ */

div.css_bar_graph a {
  color: #444444;
  text-decoration: none;
}


/* ------ lists ------ */

div.css_bar_graph ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

div.css_bar_graph li {
  margin: 0px;
  padding: 0px;
}


/* ==================== Y-AXIS LABELS ==================== */


/* ------ base ------ */

div.css_bar_graph ul.y_axis {
  width: 50px;
  position: absolute;
  top: 40px;
  left: 10px;
  text-align: right;
}


/* ------ labels ------ */

div.css_bar_graph ul.y_axis li {
  width: 100%;
  height: 24px;
  /* 50px including border */
  float: left;
  color: #888888;
  /* --- alignment correction --- */
  border-top: 1px solid transparent;
  position: relative;
  top: -13px;
  /* value = font height */
}


/* ==================== X-AXIS LABELS  ==================== */


/* ------ base ------ */

div.css_bar_graph ul.x_axis {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0px;
  left: 90px;
  text-align: center;
}


/* ------ labels ------ */

div.css_bar_graph ul.x_axis li {
  display: inline;
  width: 135px;
  float: left;
}


/* ==================== GRAPH LABEL  ==================== */


/* ------ base ------ */

div.css_bar_graph div.label {
  width: 100%;
  height: 50px;
  float: left;
  margin-top: 20px;
  text-align: center;
}

div.css_bar_graph div.label span {
  font-weight: bold;
}


/*...