Buttons

Primary Colors

<div class="flex justify-center space-x-3 m-10">
    <a class="bg-red-500 text-white px-4 py-2 rounded-md" href="#">Button 1</a>
    <a class="bg-yellow-500 text-white px-4 py-2 rounded-md" href="#">Button 2</a>
    <a class="bg-green-500 text-white px-4 py-2 rounded-md" href="#">Button 3</a>
    <a class="bg-blue-500 text-white px-4 py-2 rounded-md" href="#">Button 4</a>
    <a class="bg-indigo-500 text-white px-4 py-2 rounded-md" href="#">Button 5</a>
    <a class="bg-purple-500 text-white px-4 py-2 rounded-md" href="#">Button 6</a>
    <a class="bg-pink-500 text-white px-4 py-2 rounded-md" href="#">Button 7</a>
    <a class="bg-gray-500 text-white px-4 py-2 rounded-md" href="#">Button 8</a>
</div>

Light Shade

<div class="flex justify-center space-x-3 m-10">
    <a class="bg-red-200 text-black px-4 py-2 rounded-md" href="#">Button 1</a>
    <a class="bg-yellow-200 text-black px-4 py-2 rounded-md" href="#">Button 2</a>
    <a class="bg-green-200 text-black px-4 py-2 rounded-md" href="#">Button 3</a>
    <a class="bg-blue-200 text-black px-4 py-2 rounded-md" href="#">Button 4</a>
    <a class="bg-indigo-200 text-black px-4 py-2 rounded-md" href="#">Button 5</a>
    <a class="bg-purple-200 text-black px-4 py-2 rounded-md" href="#">Button 6</a>
    <a class="bg-pink-200 text-black px-4 py-2 rounded-md" href="#">Button 7</a>
    <a class="bg-gray-200 text-black px-4 py-2 rounded-md" href="#">Button 8</a>
</div>

Outlined

<div class="flex justify-center space-x-3 m-10">
    <a class="border-2 border-red-200 text-red-500 px-4 py-2 rounded-md" href="#">Button 1</a>
    <a class="border-2 border-yellow-200 text-yellow-500 px-4 py-2 rounded-md" href="#">Button 2</a>
    <a class="border-2 border-green-200 text-green-500 px-4 py-2 rounded-md" href="#">Button 3</a>
    <a class="border-2 border-blue-200 text-blue-500 px-4 py-2 rounded-md" href="#">Button 4</a>
    <a class="border-2 border-indigo-200 text-indigo-500 px-4 py-2 rounded-md" href="#">Button 5</a>
    <a class="border-2 border-purple-200 text-purple-500 px-4 py-2 rounded-md" href="#">Button 6</a>
    <a class="border-2 border-pink-200 text-pink-500 px-4 py-2 rounded-md" href="#">Button 7</a>
    <a class="border-2 border-gray-200 text-gray-500 px-4 py-2 rounded-md" href="#">Button 8</a>
</div>

Text with Icons

<div class="flex justify-center space-x-3 m-10">
    <a class="bg-gray-800 text-white px-4 py-2 rounded-md flex items-center space-x-2" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z"
                clip-rule="evenodd" />
        </svg>
        <span>Left Icon</span>
    </a>
    <a class="bg-gray-800 text-white px-4 py-2 rounded-md flex items-center space-x-2" href="#">
        <span>Right Icon</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                clip-rule="evenodd" />
        </svg>
    </a>
</div>

With Icons only

<div class="flex justify-center space-x-3 m-10">
    <a class="bg-yellow-600 text-white w-10 h-10 rounded-full flex justify-center items-center" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z"
                clip-rule="evenodd" />
        </svg>
    </a>
    <a class="bg-red-600 text-white w-10 h-10 rounded-full flex justify-center items-center" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
        </svg>
    </a>
    <a class="bg-blue-600 text-white w-10 h-10 rounded-full flex justify-center items-center" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
        </svg>
    </a>
    <a class="bg-purple-600 text-white w-10 h-10 rounded-full flex justify-center items-center" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
        </svg>
    </a>
    <a class="bg-indigo-600 text-white w-10 h-10 rounded-full flex justify-center items-center" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
        </svg>
    </a>
</div>