Composants Fenêtre de chat Composant de fenêtre de chat

Composant de fenêtre de chat

Composant de fenêtre de chat tridimensionnel en niveaux de gris pour les tableaux de bord de complexité modérée et les fonctionnalités interactives. Conception réactive avec prise en charge du thème sombre.

Aperçu

HTML Code

<!-- Chat Window Component (3D Grayscale, Moderate Complexity, Dashboard) -->

<div class="flex flex-col h-full bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
  <!-- Header -->
  <div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-300 dark:border-gray-700">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <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>

  <!-- Messages Area -->
  <div class="flex-1 overflow-y-auto space-y-4 pr-2">
    <!-- Incoming Message (3D Effect) -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Hello! This is an incoming message with a subtle 3D effect.</p>
      </div>
    </div>

    <!-- Outgoing Message (3D Effect) -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>This is an outgoing message designed with a 3D feel.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Here's another example of an incoming message.</p>
      </div>
    </div>

     <!-- Another Outgoing Message -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>And this is another outgoing message.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>
  </div>

  <!-- Input Area -->
  <div class="mt-4 pt-4 border-t border-gray-300 dark:border-gray-700 flex items-center">
    <input type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="ml-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

Composants associés

SkeuomorphicChatWindow

Un composant Web de fenêtre de chat stylisé avec Skeuomorphism et Tailwind CSS. Dispose d’une mise en page réactive, d’une prise en charge des thèmes sombres via CSS, de bulles de message arrondies, de dégradés et d’ombres pour une sensation tactile. Comprend des avatars et des images de repère. Aucun JavaScript inclus.

Ouvrir