ボタンコンポーネント
ポートフォリオ用のグレースケール配色のマテリアルデザインスタイルのボタンで、ダークテーマをサポートするレスポンシブデザインが特徴です。
HTMLコード
<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>