Composant Brutalism Buttons
Un composant de boutons au design brutaliste, avec des couleurs à haute saturation, une mise en page réactive et une prise en charge du mode sombre, adapté aux sites Web d’entreprise et d’entreprise.
HTML Code
<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>Composants associés
Boutons de médias sociaux Neumorphism
Un composant de bouton simple de style Neumorphism pour les interfaces de médias sociaux, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Le bouton utilise une palette de couleurs analogue et des ombres subtiles pour créer un aspect doux et extrudé.
Composant Boutons
Composant de boutons réactifs avec conception matérielle, schéma de couleurs triadique et prise en charge du thème sombre.