Buttons Component
Material Design styled buttons with a grayscale color scheme for portfolio purposes, featuring responsive design with dark theme support.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<h1 class="mb-8 text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio Showcase</h1>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/200" alt="Project 1" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 1</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 1 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/201" alt="Project 2" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 2</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 2 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/202" alt="Project 3" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 3</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 3 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
</div>
</div>Related Components
3D_Healthcare_Buttons_Component
A complex 3D-inspired buttons component for healthcare applications, featuring a black and white monochrome design with a bright accent color, responsive layout, and dark mode support.
Buttons Component
A responsive buttons component with dark mode support, suitable for e-commerce, featuring a simple triadic color scheme.
Glassmorphism Buttons Component
A simple, responsive Glassmorphism button component with Pastel colors and dark mode support using Tailwind CSS.