Buttons Component
A 3D styled buttons component suitable for a portfolio with an analogous color scheme and dark mode support.
HTML Code
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Showcase Your Work</h2>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Portfolio</a>
<a href="#" class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Products</a>
<a href="#" class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Contact</a>
</div>
</div>
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Our Team</h2>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
</div>
</div>
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Portfolio Preview</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<img src="https://picsum.photos/id/1011/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
<img src="https://picsum.photos/id/1012/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
<img src="https://picsum.photos/id/1013/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
</div>
</div>Related Components
Neumorphic Buttons Component
A button component featuring a neumorphic design style with responsive effects and dark theme support using Tailwind CSS.
Buttons Component
Simple, responsive button component with a paper/print-inspired grayscale design, suitable for educational platforms, supporting light and dark modes.
Buttons Component
A collection of minimalist and flat design buttons for various actions, using a complementary color scheme. Fully responsive with dark mode support.