JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="container">
    <li><a href="#" class="button gray">Скачать</a></li>
    <li><a href="#" class="button pink">Скачать</a></li>
    <li><a href="#" class="button blue">Скачать</a></li>
    <li><a href="#" class="button green">Скачать</a></li>
    <li><a href="#" class="button turquoise">Скачать</a></li>
    <li><a href="#" class="button black">Скачать</a></li>
    <li><a href="#" class="button darkgray">Скачать</a></li>
    <li><a href="#" class="button yellow">Скачать</a></li>
    <li><a href="#" class="button purple">Скачать</a></li>
    <li><a href="#" class="button darkblue">Скачать</a></li>
  </ul>

CSS

/* 
   * HTML5 ✰ Boilerplate
   *
   * What follows is the result of much research on cross-browser styling. 
   * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
   * Kroc Camen, and the H5BP dev community and team.
   *
   * Detailed information about this CSS: h5bp.com/css
   * 
   * ==|== normalize ==========================================================
   */


  /* =============================================================================
     HTML5 display definitions
     ========================================================================== */

  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  audio:not([controls]) { display: none; }
  [hidden] { display: none; }

  /* =============================================================================
     Base
     ========================================================================== */

  /*
   * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
   * 2. Force vertical scrollbar in non-IE
   * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
   */

  html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

  body { margin: 0; font-size: 13px; line-height: 1.231; }

  body, button, input, select, textarea { font-family: sans-serif; color: #222; }

  /* 
   * Remove text-shadow in selection highlight: h5bp.com/i
   * These selection declarations have to be separate
   * Also: hot pink! (or customize the background color to match your design)
   */

  ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
  ::selection { background: #fe57a1; color: #fff; text-shadow: none; }


  /* =============================================================================
     Links
    ...