Composant Messages d’erreur
Composant pour les médias sociaux avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
<div class="flex items-center justify-between mb-4">
<h2 class="text-2xl font-bold text-white">Error</h2>
<button class="text-gray-400 hover:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="text-gray-300 mb-6">
<p>Oops! Something went wrong. Please try again later.</p>
<ul class="mt-4 list-disc list-inside">
<li>Check your internet connection.</li>
<li>Ensure you have the latest version of the app.</li>
<li>Contact support if the issue persists.</li>
</ul>
</div>
<div class="flex justify-end">
<button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Got it
</button>
</div>
</div>
</div>
Composants associés
Composant Messages d’erreur
Un composant de messages d’erreur réactif avec des animations attrayantes pour les interactions avec l’utilisateur et prenant en charge le thème sombre à l’aide de Tailwind CSS.
Composant Messages d’erreur
Composant pour les médias sociaux avec micro-interactions, schéma de couleurs en niveaux de gris, interface complexe, conception réactive et prise en charge du thème sombre.
Composant Messages d’erreur
Composant avec une palette de couleurs pastel, une mise en page complexe, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.