JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<!-- Admin -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
    <i class="rankLevel"></i>
    <i class="rankLevel"></i>
	<div class="rankText">Admin</div>
</div>

<br>

<!-- Colab -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<div class="rankText">Colab.</div>
</div>

<br>

<!-- Desenv -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<div class="rankText">Desenv.</div>
</div>

<br>

<!-- Designer -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<div class="rankText">Designer</div>
</div>

<br>

<!-- Membro-1 -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<div class="rankText">Membro</div>
</div>

<br>

<!-- Membro-2 -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<i class="rankLevel"></i>
	<div class="rankText">Membro</div>
</div>

<br>

<!-- Moderador -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<i class="rankLevel"></i>
	<div class="rankText">Mod.</div>
</div>

<br>

<!-- MVP -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<div class="rankText">MVP</div>
</div>

<br>

<!-- Scripter -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<div class="rankText">Scripter</div>
</div>

<br>

<!-- Validando -->
<div class="rankPunbb">
	<i class="rankLevel"></i>
	<div class="rankText">Validando</div>
</div>

<br>

<!-- Banido -->
<div class="rankPunbb rankBanned">
	<i class="rankBannedIcon"></i>
	<div class="rankText">Banido</div>
</div>

CSS

.rankPunBB{
	background-color: #213b57;
	background-image: linear-gradient(to top, #243f5c, #1d3652);
	-webkit-background-image: linear-gradient(to top, #243f5c, #1d3652);
	-moz-background-image: linear-gradient(to top, #243f5c, #1d3652);
	-o-background-image: linear-gradient(to top, #243f5c, #1d3652);
	color: #fff;
	text-shadow: #000 1px 1px 0;
	font: 10px 'Dungeon',"Trebuchet MS", Arial, Helvetica, sans-serif;
	max-width: 81px;
	height: 18px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}
.rankBanned{
	background-color: #212121;
	background-image: linear-gradient(to top, #212121, #313131);
	-webkit-background-image: linear-gradient(to top, #212121, #313131);
	-moz-background-image: linear-gradient(to top, #212121, #313131);
	-o-background-image: linear-gradient(to top, #212121, #313131);
}
.rankPunBB i{
	float: left;	
}
.rankLevel{
	background: transparent url('star.png') no-repeat;
	width: 9px;
	height: 9px;
	margin: 5px 0 0 0;
}
.rankBannedIcon{
	background: transparent url('banned.png') no-repeat;
	width: 9px;
	height: 9px;
	margin: 5px 0 0 0;
	margin: 5px 0 0 5px;
}
.rankLevel:first-child{
	margin: 5px 0 0 5px;
}
.rankText{
	line-height: 19px;
	margin: 0 5px 0 0;
	float: right!important;
}