JSFiddle - React, Tailwind, and code Playground

by Skaiman

HTML

<div class="admin">
        <span class="xftstyle_admin">Администратор</span><span class="nik">Администратор</span>
    </div>
    <div class="moder">
        <span class="xftstyle_moder">Модератор</span><span class="nik">Модератор</span>
    </div>
    <div class="freedom">
        <span class="xftstyle_freedom">Freedom</span><span class="nik">Freedom</span>
    </div>   
    <div class="dev">
        <span class="xftstyle_dev">Разработчик</span><span class="nik">Разработчик</span>
    </div> 
    <div class="tester">
        <span class="xftstyle_tester">xen-Tester</span><span class="nik">Тестер</span>
    </div>
    <div class="aborigen">
        <span class="xftstyle_aborigen">Продвинутый</span><span class="nik">Продвинутый</span>
    </div>          
    <div class="user">
        <span class="xftstyle_user">Проверенный</span><span class="nik">Проверенный</span>
    </div>
    <div class="lamer">
        <span class="xftstyle_lamer">Пользователь</span><span class="nik">Пользователь</span>
    </div>
    <div class="bannen">
        <span class="xftstyle_bannen">Забаненный</span><span class="nik">Забаненный</span>
    </div>

CSS

@import 'https://fonts.googleapis.com/css?family=Cuprum|Ubuntu+Condensed';

body {
    background: #fff;
    font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
}

.nik {
  display: inline-block;
  margin-left: 10px;
}

.admin .nik {
  color: rgb(201,31,55);
  text-shadow: rgb(201,31,55) 1px 1px 3px;
}

.user .nik {
  color: rgb(142, 68, 173);
  text-shadow: rgb(142, 68, 173) 1px 1px 3px;
}

.freedom .nik {
  color: rgb(249,105,14);
  text-shadow: rgb(249,105,14) 1px 1px 3px;
}

.moder .nik {
  color: rgb(38, 166, 91);
  text-shadow: rgb(38, 166, 91) 1px 1px 3px;
}

.lamer .nik {
  color: rgb(107, 185, 240);
  text-shadow: rgb(107, 185, 240) 1px 1px 3px;
}

.aborigen .nik {
  color: rgb(58, 83, 155);
  text-shadow: rgb(58, 83, 155) 1px 1px 3px;
}

.dev .nik {
  color: rgb(4,79,103);
  text-shadow: rgb(4,79,103) 1px 1px 3px;
}

.tester .nik {
  color: rgb(108,122,137);
  text-shadow: rgb(108,122,137) 1px 1px 3px;
}

.bannen .nik {
  color: rgba(127, 95, 56, 0.15);
  text-shadow:0 0 2px rgb(127, 95, 56);
  text-decoration: line-through;
}

[class*="xftstyle_"] {
  display: inline-block;
	position: relative;
	font-family: 'Cuprum', sans-serif;
  font-size: 18px;
  text-transform: uppercase; 
	font-weight: bold;
	font-style: normal;
	text-align: center;
	padding: 1px 0;
	margin: 4px 0 5px;
	width: 120px;
	border-top: 2px solid;
	border-bottom: 2px solid;
}
.xftstyle_admin {
	color: rgb(201,31,55);
	border-color: rgb(201,31,55);
}
.xftstyle_user {
	color: rgb(142, 68, 173);
	border-color: rgb(142, 68, 173);
}
.xftstyle_freedom {
	color: rgb(249,105,14);
	border-color: rgb(249,105,14);
}
.xftstyle_moder {
	color: rgb(38, 166, 91);
	border-color: rgb(38, 166, 91);
}
.xftstyle_lamer {
	color: rgb(107, 185, 240);
	border-color: rgb(107, 185, 240);
}
.xftstyle_aborigen {
	color: rgb(58, 83, 155);
	border-color: rgb(58, 83, 155);
}
.xftstyle_dev {
	color: rgb(4,79,103);
	border-color: rgb(4,79,103);
}
.xftstyle_tester {
	color: rgb(108,122,137);
	border-color:...