JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="section">
    <h2>Sparkline charts</h2>

    <h3>Fruits eaten in the last 14 days by type</h3>

    <ul class="sparklist">
      <li>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
          <span class="index"><span class="count" style="height: 97%;">220,</span> </span>
          <span class="index"><span class="count" style="height: 62%;">140,</span> </span>
          <span class="index"><span class="count" style="height: 35%;">80,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 40%;">90,</span> </span>
          <span class="index"><span class="count" style="height: 80%;">180,</span> </span>
          <span class="index"><span class="count" style="height: 62%;">140,</span> </span>
          <span class="index"><span class="count" style="height: 53%;">120,</span> </span>
          <span class="index"><span class="count" style="height: 71%;">160,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 100%;">225,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 56%;">125)</span> </span>
        </span>
        <a href="http://www.example.com/fruits/apples/">Apples</a>
      </li>
      <li>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 40%;">(90,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 33%;">75,</span> </span>
          <span class="index"><span...

CSS

/* SETUP */
    * { 
      margin: 0; 
      padding: 0; 
      list-style-type: none;
    }
    body { 
      font-family: Helvetica, Arial, sans-serif; 
      color: #333; 
    }
    a { 
      color: #2D7BB2; 
      text-decoration: none; 
      font-weight: bold; 
    }
    a:hover { 
      color: #333; 
    }
    h2, h3, h4 { 
      clear: both; 
      margin: 0 0 0.6em 0;
    }
    h3 { 
      color: #666; 
    }
    .section { 
      float: left;
      clear: left;
      padding: 1em 2em;
    }
    
    /* SPARKLINES */
    .sparkline { 
      float: left; 
      height: 1em;
      margin: 0 0.5em;
    }
    .sparkline .index { 
        position: relative;
      float: left; 
      width: 2px; 
      height: 100%; 
    }
    .sparkline .index .count { 
      display: block; 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      width: 100%; 
      height: 0; 
      background: #AAA;
      overflow: hidden; 
      text-indent: -9999px;
    }
    
    /* SPARKLINE LISTS */
    .sparklist li { 
      padding: 0.4em 0; 
    }