HTML

<div class="bg-gray-100 p-10">
        <div class="p-5">
            <a href="#" class="transition mr-1 bg-white hover:bg-gray-200 text-black text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#" class="transition mr-1 bg-black hover:bg-gray-900 text-white text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#" class="transition mr-1 bg-gray-500 hover:bg-gray-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#" class="transition mr-1 bg-red-500 hover:bg-red-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#"
                class="transition mr-1 bg-yellow-500 hover:bg-yellow-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
        </div>
        <div class="p-5">
            <a href="#"
                class="transition mr-1 bg-green-500 hover:bg-green-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#" class="transition mr-1 bg-blue-500 hover:bg-blue-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#"
                class="transition mr-1 bg-indigo-500 hover:bg-indigo-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#"
                class="transition mr-1 bg-purple-500 hover:bg-purple-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
            <a href="#" class="transition mr-1 bg-pink-500 hover:bg-pink-700 text-white text-center py-2 px-4 rounded">
                Button
            </a>
        </div>
    </div>

Preview