Buttons

Regular

Primary Success Warning Danger Dark Light

<a class="bg-blue-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Primary</a>
<a class="bg-green-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Success</a>
<a class="bg-orange-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Warning</a>
<a class="bg-red-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Danger</a>
<a class="bg-gray-900 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Dark</a>
<a class="bg-gray-300 text-gray-900 px-5 py-1 rounded-sm inline-block" href="#">Light</a>

Regular Outline

Primary Success Warning Danger Dark Light

<a class="border border-blue-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Primary</a>
<a class="border border-green-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Success</a>
<a class="border border-orange-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Warning</a>
<a class="border border-red-700 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Danger</a>
<a class="border border-gray-900 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Dark</a>
<a class="border border-gray-300 text-gray-300 px-5 py-1 rounded-sm inline-block" href="#">Light</a>

Rounded

Primary Success Warning Danger Dark Light

<a class="bg-blue-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Primary</a>
<a class="bg-green-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Success</a>
<a class="bg-orange-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Warning</a>
<a class="bg-red-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Danger</a>
<a class="bg-gray-900 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Dark</a>
<a class="bg-gray-300 text-gray-900 px-5 py-1 rounded-full inline-block" href="#">Light</a>

Rounded Outline

Primary Success Warning Danger Dark Light

<a class="border border-blue-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Primary</a>
<a class="border border-green-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Success</a>
<a class="border border-orange-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Warning</a>
<a class="border border-red-700 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Danger</a>
<a class="border border-gray-900 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Dark</a>
<a class="border border-gray-300 text-gray-300 px-5 py-1 rounded-full inline-block" href="#">Light</a>