JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="wrapper">
  <a href="#" class="btn-base btn-cta btn-1">
    <span>ПЕРЕХОД ZORNET.RU #1</span>
  </a>
  <a href="#" class="btn-base btn-cta btn-2">
    <span>ПЕРЕХОД ZORNET.RU #2</span>
  </a>
  <a href="#" class="btn-base btn-cta btn-3">
    <span>ПЕРЕХОД ZORNET.RU #3</span>
  </a>
  <a href="#" class="btn-base btn-cta btn-4">
    <span>ПЕРЕХОД ZORNET.RU #4</span>
  </a>
  <a href="#" class="btn-base btn-cta btn-5">
    <span>ПЕРЕХОД ZORNET.RU #5</span>
  </a>
  <a href="#" class="btn-base btn-cta btn-6">
    <span>ПЕРЕХОД ZORNET.RU #6</span>
  </a>
</div>

CSS

@import 'https://fonts.googleapis.com/css?family=Oswald|Open+Sans';

html, body {
  background-color: #ecf0f1;
}

/* centers the button in the DOM*/
.wrapper{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

/* gives btn width and height */
a {
  text-decoration: none; /* strip natual underlines */
  width: 271px;
  line-height: 102px;
  height: 102px;
  margin: 3.6em 1.6em 0;
}

/**  colors and transitions back to normal
  *  hex colors from flatuicolors.com   
  **/

.btn-1 {
    background: #2980b9; /* BELIZE HOLE */
    -webkit-transition: background 225ms ease!important;
    -moz-transition: background 225ms ease!important;
    transition: background 225ms ease!important;
}

.btn-1:before, .btn-1:focus, .btn-1:hover {
    background: #3498db; /* peter river */
}

.btn-2 {
    background: #27ae60; /* nephritis */
    -webkit-transition: background 225ms ease!important;
    -moz-transition: background 225ms ease!important;
    transition: background 225ms ease!important;
}

.btn-2:before, .btn-2:focus, .btn-2:hover {
    background: #2ecc71; /* emerald */
}

.btn-3 {
    background: #c0392b; /* pomegranate */
    -webkit-transition: background 225ms ease!important;
    -moz-transition: background 225ms ease!important;
    transition: background 225ms ease!important;
}

.btn-3:before, .btn-3:focus, .btn-3:hover {
    background: #e74c3c; /* alizarin */
}

.btn-4 {
    background: #8e44ad; /* wisteria */
    -webkit-transition: background 225ms ease!important;
    -moz-transition: background 225ms ease!important;
    transition: background 225ms ease!important;
}

.btn-4:before, .btn-4:focus, .btn-4:hover {
    background: #9b59b6; /* amethyst */
}
.btn-5 {
    background: #e67e22; /* carrot */
    -webkit-transition: background 225ms ease!important;
    -moz-transition: background 225ms ease!important;
    transition: background 225ms ease!important;
}

.btn-5:before, .btn-3:focus, .btn-3:hover {
    background: #f39c12; /* orange...