{{-- VIOLET --}}
<span class="text-violet-500">Violet</span>
<div class="bg-violet-500"></div>
<div class="bg-violet-500/20"></div>

{{-- GREEN --}}
<span class="text-green-500">Green</span>
<div class="bg-green-500"></div>
<div class="bg-green-500/20"></div>

{{-- RED --}}
<span class="text-red-500">Red</span>
<div class="bg-red-500"></div>
<div class="bg-red-500/20"></div>

{{-- BLUE --}}
<span class="text-blue-500">Blue</span>
<div class="bg-blue-500"></div>
<div class="bg-blue-500/20"></div>

{{-- YELLOW --}}
<span class="text-yellow-500">Yellow</span>
<div class="bg-yellow-500"></div>
<div class="bg-yellow-500/20"></div>

{{-- TEAL --}}
<span class="text-teal-500">Teal</span>
<div class="bg-teal-500"></div>
<div class="bg-teal-500/20"></div>

{{-- CYAN --}}
<span class="text-cyan-500">Cyan</span>
<div class="bg-cyan-500"></div>
<div class="bg-cyan-500/20"></div>

{{-- PINK --}}
<span class="text-pink-500">Pink</span>
<div class="bg-pink-500"></div>
<div class="bg-pink-500/20"></div>

{{-- BLACK --}}
<span class="text-black-500">Black</span>
<div class="bg-black-500"></div>
<div class="bg-black-500/20"></div>