JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div class="pref multi">MultiGame</div>
<div class="pref news">News</div>
<div class="pref ps4">PS4</div>
<div class="pref tutorial">Tutorial</div>
<div class="pref sony">Sony</div>
<div class="pref youtube">Youtube</div>
<div class="pref nintendo">Nintendo</div>
<div class="pref xboxone">XBoxOne</div>
<div class="pref offtopic">Off-topic</div>
<div class="pref microsoft">Microsoft</div>

CSS

.pref{
  background: #333;
  color: #fff;
  text-align: center;
  display: inline-block;
  padding: .1em 2em .2em;
  font: 12px Lucida sans;
  border-radius: 2px;
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.1) 8px, transparent 0);
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1) 8px, transparent 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  box-shadow: inset rgba(0,0,0,.3) 0 -2px 0;
  text-shadow: rgba(0,0,0,.5) 1px 1px 0;
}
.multi{
  background-color: #9370DB;
}
.news{
    background-color: #8B008B;
}
.ps4{
    background-color: #3A5FCD;
}
.tutorial{
    background-color: #FF7F00;
}
.sony{
    background-color: #000;
}
.youtube{
    background-color: #cc181e;
}
.nintendo{
    background-color: #87CEEB;
}
.xboxone{
    background-color: #00CD00;
}
.offtopic{
    background-color: #2F4F4F;
}
.microsoft{
    background-color: #79CDCD;
}