HTML 代码
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">
<div class="max-w-4xl mx-auto py-8 px-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border-t-8 border-b-8 border-blue-500 dark:border-blue-700 overflow-hidden relative">
<div class="absolute -top-6 -right-6 w-24 h-24 bg-red-500 dark:bg-red-700 transform rotate-45 opacity-75"></div>
<div class="absolute -bottom-6 -left-6 w-24 h-24 bg-yellow-500 dark:bg-yellow-700 transform -rotate-45 opacity-75"></div>
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 sm:mb-8 text-center uppercase tracking-wide relative z-10">
<span class="block">Explore Our Expertise</span>
<span class="block w-16 h-1.5 bg-blue-500 dark:bg-blue-700 mx-auto mt-2"></span>
</h2>
<div class="flex flex-wrap justify-center gap-2 sm:gap-3 lg:gap-4 relative z-10">
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-blue-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Strategy
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-red-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Innovation
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-yellow-500 text-gray-900 text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Technology
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-green-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Consulting
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-purple-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Digitalization
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-teal-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-teal-600 dark:bg-teal-700 dark:hover:bg-teal-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Analytics
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-orange-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-orange-600 dark:bg-orange-700 dark:hover:bg-orange-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Marketing
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-pink-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Branding
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-indigo-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Research
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-lime-500 text-gray-900 text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-lime-600 dark:bg-lime-700 dark:hover:bg-lime-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Development
</a>
</div>
</div>
</div>