Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec des micro-interactions axées sur des animations attrayantes. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.
HTML Code
<div class="flex flex-col max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 ease-in-out hover:shadow-2xl">
<div class="flex items-center justify-between p-4 border-b-2 border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
<button class="focus:outline-none">
<svg class="h-6 w-6 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.55 1.21a1 1 0 01-1.45-1.21zM4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="overflow-auto max-h-96 p-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
<p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
<p class="text-gray-800 dark:text-gray-200">I have a question about my order.</p>
</div>
</div>
</div>
<div class="p-4 border-t-2 border-gray-200 dark:border-gray-700">
<form class="flex">
<input type="text" placeholder="Type your message..." class="flex-grow p-2 border rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-200 ease-in-out">
<button type="submit" class="ml-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 ease-in-out">
Send
</button>
</form>
</div>
</div>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, de style Glassmorphism, avec une palette de couleurs pastel, conçu pour la consommation de contenu. Il dispose d’une mise en page réactive et d’un support de thème sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif présentant un design 3D moderne avec des couleurs pastel et des fonctionnalités interactives, adapté aux affichages de portfolios.
Composant de fenêtre de chat
Un composant de fenêtre de chat conçu dans le style Brutalism avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.