Composant Toast Notifications
Un composant Toast Notifications de style Neumorphism utilisant Tailwind CSS avec prise en charge du thème sombre.
HTML Code
<div class="fixed top-5 right-5 space-y-4">
<!-- Success Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Success!</p>
<p class="text-gray-600 dark:text-gray-400">Your changes have been saved successfully.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Error Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-red-600 dark:text-red-400 font-semibold">Error!</p>
<p class="text-gray-600 dark:text-gray-400">There was an issue processing your request.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Info Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-blue-600 dark:text-blue-400 font-semibold">Info!</p>
<p class="text-gray-600 dark:text-gray-400">This is an informational message.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<style>
/* Neumorphism Styles */
.bg-white {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
-8px -8px 15px rgba(255, 255, 255, 0.9);
}
.dark .bg-gray-800 {
box-shadow: inset 8px 8px 15px rgba(0, 0, 0, 0.5),
inset -8px -8px 15px rgba(255, 255, 255, 0.1);
}
</style>Composants associés
Composant Toast Notifications
Un composant de notifications Toast minimaliste et dynamique utilisant Tailwind CSS. Le composant est conçu avec une mise en page simple pour les portfolios, prend en charge le mode sombre et est réactif sans JavaScript.
Composant Toast Notifications
Un composant de notification Toast réactif avec un design skeuomorphique et une prise en charge du mode sombre, construit avec Tailwind CSS.
Composant Toast Notifications
Un composant de notifications toast de style brutaliste utilisant Tailwind CSS, conçu pour un portefeuille qui présente des travaux ou des produits. La conception intègre une palette de couleurs analogue et prend en charge le mode sombre avec une interface complexe.