Composants Fenêtre de chat Fenêtre de chat brutaliste simple

Fenêtre de chat brutaliste simple

Composant de fenêtre de chat brutaliste simple en niveaux de gris pour la consommation de contenu de blog avec mode sombre et conception réactive

Aperçu

HTML Code

<div class="flex flex-col h-screen bg-white dark:bg-black border border-black dark:border-white">
  <!-- Chat Header -->
  <div class="flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 border-b border-black dark:border-white">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <h2 class="text-lg font-bold text-black dark:text-white">Simple Chat</h2>
    </div>
    <button class="text-black dark:text-white font-bold">X</button>
  </div>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Hey, this is a simple message.</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm">This is a reply message.</p>
      </div>
    </div>

    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Another simple incoming message to show the scroll.</p>
      </div>
    </div>

      <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm max-w-xs">And a longer outgoing message to test wrapping and responsiveness. It should wrap when the screen is smaller.</p>
      </div>
    </div>

  </div>

  <!-- Chat Footer -->
  <div class="flex p-4 bg-gray-200 dark:bg-gray-800 border-t border-black dark:border-white">
    <input type="text" placeholder="Type a message..." class="flex-1 p-2 rounded-lg border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
    <button class="ml-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-bold rounded-lg border border-black dark:border-white">Send</button>
  </div>
</div>

Composants associés

Composant de la fenêtre de chat - Voyage/Tourisme Skeuomorphic

Un composant de fenêtre de chat complexe et réactif conçu pour les sites Web de voyage/tourisme, avec un style skeuomorphe avec une palette de couleurs analogue et la prise en charge du mode sombre.

Ouvrir

Composant de fenêtre de chat

Composant de fenêtre de chat réactif conçu pour une utilisation professionnelle, doté d’une interface utilisateur en mode sombre avec une palette de couleurs complémentaire. Comprend des messages de remplacement, une liste de contacts et une zone de saisie.

Ouvrir

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.

Ouvrir