JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script src="http://d3js.org/d3.v2.js"></script>
<script>
  var distances = [2.23, 2.39, 2.59, 2.77, 3.05];

  d3.select('body').selectAll('div')
    .data(distances)
    .enter()
      .append('div')
      .html('...')
      .style('width', '10px')
      .style('opacity', 0)
      .transition()
        .delay(function(d, i) { return i * 1000 })
        .duration(1000)    
        .style('width', function(d) { return (d * 150) + 'px'; })
        .style('opacity', 1)
        .text(function(d) { return d + ' miles'; });
</script>

CSS

body {
      padding: 10px;
      background: #000;
    }
    div {
      background: #333;
      margin-bottom: 10px;
      padding: 7px;
      color: #fff;
      font-family: Arial;
      font-size: 12px; 
    }