Brutalism Buttons コンポーネント
ブルータリズムデザインのボタンコンポーネントで、高彩度の色、レスポンシブレイアウト、ダークモードのサポートが特徴で、ビジネスや企業のWebサイトに適しています。
HTMLコード
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900">
<h1 class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6">Choose Your Action</h1>
<div class="flex space-x-4">
<button class="px-6 py-3 font-semibold text-white bg-red-600 border-2 border-red-800 rounded-lg shadow-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-red-800 dark:border-red-900 dark:hover:bg-red-700 dark:focus:ring-red-600">
Primary Action
</button>
<button class="px-6 py-3 font-semibold text-white bg-blue-600 border-2 border-blue-800 rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-800 dark:border-blue-900 dark:hover:bg-blue-700 dark:focus:ring-blue-600">
Secondary Action
</button>
</div>
<div class="flex space-x-4 mt-6">
<button class="px-6 py-3 text-gray-800 bg-yellow-400 border-2 border-yellow-600 rounded-lg shadow-lg hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-yellow-600 dark:border-yellow-800 dark:text-white dark:hover:bg-yellow-500 dark:focus:ring-yellow-400">
Tertiary Action
</button>
<button class="px-6 py-3 text-white bg-green-500 border-2 border-green-700 rounded-lg shadow-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-700 dark:border-green-800 dark:hover:bg-green-600 dark:focus:ring-green-400">
Another Action
</button>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded-md shadow-lg">
<div class="flex items-center justify-center mt-2">
<img src="https://randomuser.me/api/portraits/men/81.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
<p class="ml-2 text-lg text-gray-700 dark:text-gray-300">John Doe</p>
</div>
</div>
</div>