JSFiddle - React, Tailwind, and code Playground

HTML

<section>
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
   </section>
   <section>
      <span>a</span>
      <span>b</span>
      <span>c</span>
      <span>d</span>
      <span>e</span>
      <span>f</span>
      <span>g</span>
      <span>h</span>
      <span>i</span>
      <span>j</span>
      <span>k</span>
      <span>l</span>
      <span>m</span>
      <span>n</span>
      <span>o</span>
      <span>p</span>
      <span>q</span>
      <span>r</span>
      <span>s</span>
      <span>t</span>
      <span>u</span>
      <span>v</span>
      <span>w</span>
      <span>x</span>
      <span>y</span>
      <span>z</span>
      <span>ä</span>
      <span>ö</span>
      <span>ü</span>
      <span>ß</span>
   </section>
   <section>
      <span>0</span>.
      <span>1</span>
      <span>2</span>
      <span>3</span>.
      <span>4</span>
      <span>5</span>
      <span>6</span>,
      <span>7</span>
      <span>8</span>
      <span>9</span>
   </section>
   <section>
      <span>H</span>
      <span>a</span>
      <span>m</span>
      <span>b</span>
      <span>u</span>
      <span>r</span>
      <span>g</span>
   </section>
   <section>
      <span>A</span>
      <span>b</span>
      <span>f</span>
      <span>l</span>
      <span>u</span>
      <span>g</span>
      <span>:</span>
   </section>
   <section>
      <span>1</span>
      <span>0</span>
      <span>:</span>
      <span>0</span>
      <span>0</span>
      <span> </span>
      <span>U</span>
      <span>h</span>
      <span>r</span>
   </section>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 75%;
      }
      body {
         padding: 0;
      }
      section {
         line-height: 1;
         /*font-family: monospace;*/
         /*font-family: sans-serif;*/
         /*font-family: monospace sans-serif;*/
         font-size: 4rem; /*Größe von Punkt und Komma*/
         display: flex;
         flex-wrap: wrap;
         align-items: flex-end;
      }
      span {
         color: white;
         background-color: black;
         font-family: 'Droid Sans Mono';
         font-size: 5rem;
         font-weight: bold;
         text-transform: uppercase;
         line-height: 1;
         overflow: hidden;
         position: relative;
         padding: 0.2rem 0.8rem;
         border: 1px solid black;
         border-radius: 0.4rem;
         margin: 0.4rem;
      }
      span:before {
         font-size: 1rem;
         content: "";
          border-bottom:.2rem solid #AAA;
         color: red; /*kräftige Farbe zum Testen*/
         color: silver;
         position: absolute;
         top: 50%;
          margin-top:-.1rem;
         left: -0rem;
          right:0;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }