Componentes de búsqueda

Categorías

Componentes Ventana de chat

Ventana de chat

Interfaz para la comunicación entre el servicio de atención al cliente y los usuarios

Componente de ventana de chat

Un componente de ventana de chat simple, receptivo, inspirado en Material Design con tonos cálidos al atardecer, adecuado para sitios web comerciales y corporativos, compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col h-[700px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-md lg:max-w-lg">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 text-white shadow-md">
        <div class="flex items-center space-x-3">
            <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div>
                <h3 class="text-lg font-semibold">Olivia Martin</h3>
                <p class="text-sm opacity-90">Online</p>
            </div>
        </div>
        <button class="p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white">
            <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>

    <!-- Chat Messages Area -->
    <div class="flex-1 p-4 overflow-y-auto bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
        <!-- Incoming Message -->
        <div class="flex items-start mb-4">
            <img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Hello! How can I assist you today regarding your last order?</p>
                <span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:05 AM</span>
            </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end mb-4">
            <div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Hi Olivia, I have a question about the shipping status. My order number is #12345.</p>
                <span class="block text-xs text-right text-white text-opacity-80 mt-1">10:07 AM</span>
            </div>
        </div>

        <!-- Incoming Message -->
        <div class="flex items-start mb-4">
            <img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Certainly! Let me check that for you. Please wait a moment.</p>
                <span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:08 AM</span>
            </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end mb-4">
            <div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Thanks!</p>
                <span class="block text-xs text-right text-white text-opacity-80 mt-1">10:09 AM</span>
            </div>
        </div>
    </div>

    <!-- Message Input -->
    <div class="p-4 bg-white dark:bg-gray-800 flex items-center space-x-3 border-t border-gray-200 dark:border-gray-700">
        <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 shadow-inner transition-colors duration-200">
        <button class="bg-orange-500 dark:bg-orange-600 text-white p-3 rounded-full hover:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 shadow-md transition-colors duration-200">
            <svg class="w-6 h-6 -rotate-45" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
        </button>
    </div>
</div>

Un componente de ventana de chat responsivo diseñado con una estética inspirada en el papel/impresión, utilizando tonos sepia/marrón. Incluye soporte para modo oscuro y elementos interactivos adecuados para citas o plataformas sociales.

Abrir Vista previa

                <div class="min-h-screen bg-orange-50 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 md:p-8 font-serif text-stone-800 dark:text-stone-300">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-900 rounded-lg shadow-xl overflow-hidden border border-stone-200 dark:border-stone-800 flex flex-col" style="box-shadow: 8px 8px 0px 0px rgba(100, 70, 0, 0.1);">

    <!-- Header -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div>
          <h2 class="font-bold text-lg leading-tight text-amber-800 dark:text-amber-300">Elara Vance</h2>
          <p class="text-sm text-stone-600 dark:text-stone-400">Online now</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l.293-.293A1 1 0 017 8.586V10h4V7a1 1 0 011-1h2.586l.293-.293A1 1 0 0117 4.586V6h4a1 1 0 011 1v4a1 1 0 01-1 1h-1.586l-.293.293A1 1 0 0117 15.414V14H7a1 1 0 01-1-1v-4a1 1 0 011-1h10a1 1 0 001-1V7a1 1 0 00-1-1h-2v4z" />
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Container -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 bg-orange-50 dark:bg-stone-950 border-t border-b border-stone-200 dark:border-stone-800" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPGcgZmlsbD0iI0FBQjBBQiIgZmlsbC1vcGFjaXR5PSIuMDgiPgogICAgICA8cGF0aCBkPSJNNiAxOXY0Mmg0OFYxOUg2em00MCA1aDJhMSA0IDEgNCAxIDQ0LTQgMWgxMmE0IDEgNFY3SDQyem0xMiA0MmE0IDEgNCAxIDQgMWgtMzJhMSA0IDEgNC4wNi00LjA2IDEtMy45NC0xem0tNDAgNHYaMWExIDEgMSAwIDAxLjAxLS41MiAxIDEgMSAwIDAgMSA0LjE2LTQwLjMzIDEtMy44Ny0xem00Mi45NiAyYzAtMi42NiA4LjMtNC4zMiAxMi00Ljc0VjE0SDM4VjEwSDIyVjdIMTkgMi45M0E0IDEgNCAxIDQuMDIgMS4zNSA0IDEgNCAxIDQuMDJWMmgwTTAgNzBoNDh2MTJMMzYgODJMMjQgOTRMMTUgMTAzSDR6bTYwLTQwaC0xMnYxMmwxMiA4LS43NC0uNjJWMTEyem0yMCAyaDNhMSAxIDEgMCAxIDAtNiAwTTAgMGgwVjIwaDQ4djcuNjlhMSAxIDEgMCAxLS42OC41OGwtLjIyLS4wMiAxLjQ4LTQuOTZhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek01MSAyMEE0IDEgNCAxIDI0LjAyIDUwem0tMjYtMTguMjNhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek0xMyA3MmgwVjU2QTYgNiA2IDAgMDE2IDYySDUwYTYgNiA2IDAgMDE1LTUgNTYtNWExIDUgMSA1IDEwLjAyLS41NCazPgogICAgPC9nPgo8L3N2Zz4=');
      background-size: 60px 60px; background-repeat: repeat;">

      <!-- Received message -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>Hey there! Your profile looked really interesting. I love your passion for classic literature.</p>
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:30 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>Oh, thank you! I spend a lot of time in libraries. What kind of books are you into?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:32 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

      <!-- Received message with image -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>I'm a big fan of historical fiction and anything that transports me to another era.</p>
          <img src="https://picsum.photos/300/200?random=1" alt="Shared Image" class="mt-2 rounded-lg object-cover w-full h-auto max-h-48">
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:35 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>That's awesome! I just finished 'The Nightingale' by Kristin Hannah. Have you read it?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:38 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

    </div>

    <!-- Message Input -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-t border-stone-200 dark:border-stone-700 flex items-center space-x-3">
      <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" />
        </svg>
      </button>
      <input type="text" placeholder="Type your message..." class="flex-1 py-2 px-4 rounded-full bg-white dark:bg-stone-900 border border-stone-300 dark:border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm sm:text-base placeholder:text-stone-500 dark:placeholder:text-stone-400">
      <button class="p-2 rounded-full bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-colors duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>

  </div>
</div>

Componente de ventana de chat

Un componente de ventana de chat receptivo diseñado con los principios de Material Design, con un esquema de color otoñal adecuado para organizaciones sin fines de lucro / benéficas. Incluye soporte para el modo oscuro y elementos interactivos como burbujas de mensaje y un campo de entrada.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col h-[70vh] md:h-[80vh] lg:h-[75vh]">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-4 bg-orange-700 dark:bg-orange-900 text-white shadow-md">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-300" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Chat User Avatar">
        <h2 class="text-lg font-semibold">Sarah Jenkins</h2>
      </div>
      <div class="flex space-x-3">
        <button aria-label="Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
          </svg>
        </button>
        <button aria-label="Video Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.872-3.248A1 1 0 0122 7.744v8.512a1 1 0 01-2.128.536L15 14m-5 4v-4a4 4 0 014-4h.5a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5H10zm0 0a2 2 0 100-4 2 2 0 000 4z"/>
          </svg>
        </button>
        <button aria-label="More Options" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Body (Messages) -->
    <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-800 scrollbar-thumb-orange-800 dark:scrollbar-thumb-orange-600 scrollbar-track-orange-100 dark:scrollbar-track-gray-700 scrollbar-thin">

      <!-- Received Message -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Hello! Thank you so much for reaching out. We appreciate your interest in our 'Harvest Hope' initiative.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
      </div>

      <!-- Sent Message -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <p class="text-sm">I'm excited to learn more! How can I make a donation, and what impact will it have?</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:07 AM</span>
        </div>
      </div>

      <!-- Received Message with longer text -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">You can donate directly through our website at <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">[Your Charity Website Link]</a>. Every contribution helps us provide food, shelter, and education to those in need, especially during this season.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:08 AM</span>
        </div>
      </div>

      <!-- Sent Message with image -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-2 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <img src="https://picsum.photos/300/200?random=1" alt="Image attachment" class="rounded-lg mb-2 shadow-lg w-full h-auto object-cover">
          <p class="text-sm">This looks like a wonderful cause! Here's a photo from our recent charity drive to share some inspiration.</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:10 AM</span>
        </div>
      </div>

      <!-- Received message with another user -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Another User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Thanks for sharing that, John! It's inspiring to see the community come together.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:12 AM</span>
        </div>
      </div>

    </div>

    <!-- Chat Input -->
    <div class="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-inner flex items-center space-x-2">
      <button aria-label="Attach File" class="p-2 text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 rounded-full">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
        </svg>
      </button>
      <input type="text" placeholder="Type a message..." aria-label="Chat message input" class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:border-transparent text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400">
      <button aria-label="Send Message" class="p-2 bg-orange-600 dark:bg-orange-700 text-white rounded-full shadow-md hover:bg-orange-700 dark:hover:bg-orange-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-45 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar for Webkit browsers */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track-color, transparent);
    border-radius: 10px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--tw-scrollbar-thumb-color);
    border-radius: 10px;
    border: 2px solid var(--tw-scrollbar-track-color, transparent);
  }

  /* Fallback for Firefox and other browsers, using standard properties where possible */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color);
  }

  /* Tailwind utility classes for scrollbar */
  .scrollbar-thumb-orange-800 {
    --tw-scrollbar-thumb-color: #9A3412;
  }
  .dark\:scrollbar-thumb-orange-600 {
    --tw-scrollbar-thumb-color: #DDAA55;
  }
  .scrollbar-track-orange-100 {
    --tw-scrollbar-track-color: #FFF7ED;
  }
  .dark\:scrollbar-track-gray-700 {
    --tw-scrollbar-track-color: #374151;
  }

  /* Material Design-inspired blob shapes for message bubbles */
  .material-blob-left {
    border-top-left-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
  .material-blob-right {
    border-top-right-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
</style>

Componente de ventana de chat

Un componente de ventana de chat complejo y receptivo con una estética de diseño monoespaciado/desarrollador, combinación de colores otoñal, optimizado para aplicaciones deportivas/físicas, incluida la compatibilidad con el modo oscuro y elementos interactivos.

Abrir Vista previa

                <div class="flex flex-col h-screen bg-amber-50 dark:bg-zinc-950 font-mono text-zinc-800 dark:text-zinc-200 p-4 sm:p-6 lg:p-8">

  <!-- Top Bar / Header -->
  <div class="flex items-center justify-between p-4 bg-orange-800 dark:bg-zinc-800 text-white rounded-t-lg shadow-md mb-4">
    <div class="flex items-center space-x-3">
      <img src="https://picsum.photos/id/1018/60/60" alt="Team Logo" class="w-10 h-10 rounded-full border-2 border-white object-cover">
      <h2 class="text-lg sm:text-xl font-bold flex flex-col sm:flex-row items-baseline">
        <span class="block sm:mr-2">Team 'Apex Predators'</span>
        <span class="text-orange-200 text-sm sm:text-base">(Workout 05/11 Chat)</span>
      </h2>
    </div>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
      </button>
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <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>

  <!-- Chat Area -->
  <div class="flex-1 overflow-y-auto p-4 bg-orange-50 dark:bg-zinc-900 rounded-lg shadow-inner mb-4 border border-orange-200 dark:border-zinc-800 space-y-4 sm:space-y-6">

    <!-- Message 1 (Other User) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Coach Mike</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:15 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Alright team, focus on form today. We're hitting those high-intensity reps. Hydrate well!</p>
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 2 (Self) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:17 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Got it, Coach! Ready to push hard. 💪 Any specific warm-up routine you recommend?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- Message 3 (Other user with image) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Alex G.</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:20 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Checking in! Here's my progress from yesterday's cardio:</p>
          <img src="https://picsum.photos/id/237/300/200" alt="Activity Progress" class="mt-2 rounded-md max-w-full h-auto object-cover">
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 4 (Self - long message) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:22 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Awesome work, Alex! That's a solid run. Keep it up! I'm struggling a bit with my squat depth, considering filming a set today to review it later. Any tips for getting lower without losing form?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- System message / separator -->
    <div class="text-center text-xs text-orange-700 dark:text-zinc-500 font-semibold italic my-4">
      --- Today --- 
    </div>

    <!-- Pinned message / announcement -->
    <div class="flex items-start p-3 bg-brown-700 dark:bg-brown-900 text-white rounded-lg shadow-md border border-brown-600 dark:border-brown-800">
        <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4H9V9h2v5zm-2-7a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path></svg>
        <p class="text-sm sm:text-base font-semibold">Reminder: <span class="font-normal">Warm-up drills posted in the 'Resources' channel.</span></p>
    </div>

  </div>

  <!-- Input Area -->
  <div class="flex flex-col sm:flex-row items-center p-4 bg-orange-800 dark:bg-zinc-800 rounded-b-lg shadow-md space-y-3 sm:space-y-0 sm:space-x-3">
    <button class="p-2 rounded-full text-white bg-orange-700 dark:bg-zinc-700 hover:bg-orange-600 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600 w-full sm:w-auto">
      <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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L18 14"></path></svg>
      <span class="sr-only">Attach File</span>
    </button>
    <textarea type="text" placeholder="Message #team-chat (Press Alt+Enter for new line)" class="flex-1 p-3 rounded-lg bg-orange-100 dark:bg-zinc-700 text-orange-900 dark:text-zinc-200 placeholder-orange-400 dark:placeholder-zinc-400 border border-orange-300 dark:border-zinc-600 focus:outline-none focus:border-orange-500 dark:focus:border-zinc-500 resize-none h-12 sm:h-auto min-h-[48px] max-h-[150px]"></textarea>
    <button class="p-3 rounded-lg bg-burgundy dark:bg-purple-800 text-white hover:bg-brown-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-burgundy dark:focus:ring-purple-600 w-full sm:w-auto font-semibold">
      <svg class="w-6 h-6 inline-block sm:hidden" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      <span class="hidden sm:inline-block">Send</span>
    </button>
  </div>

</div>

<style>
  /* Define custom colors for better autumn scheme representation */
  .bg-burgundy {
    background-color: #8B0000;
  }
  .text-burgundy {
    color: #8B0000;
  }
  .border-burgundy {
    border-color: #8B0000;
  }
  .hover\:bg-burgundy-light:hover {
    background-color: #A52A2A;
  }

  /* Dark mode variants for custom colors */
  .dark .bg-burgundy {
    background-color: #6a0000;
  }
  .dark .text-burgundy {
    color: #ae4747;
  }
  .dark .border-burgundy {
    border-color: #6a0000;
  }
  .dark .hover\:bg-burgundy-light:hover {
    background-color: #7c0000;
  }

  /* Add some brown tones */
  .bg-brown-700 {
    background-color: #795548;
  }
  .dark\:bg-brown-900 {
    background-color: #4e342e;
  }
  .border-brown-600 {
    border-color: #6d4c41;
  }
  .dark\:border-brown-800 {
    border-color: #3e2723;
  }
  .hover\:bg-brown-600:hover {
    background-color: #6d4c41;
  }

  /* Adjust max-h for textarea on smaller screens */
  @media (max-width: 639px) {
    textarea {
      max-height: 100px; /* Limit height on mobile */
    }
  }
</style>

Componente de ventana de chat

Un componente de ventana de chat simple y receptivo con estética inspirada en cyberpunk y tonos tierra naturales, diseñado para plataformas de foros y comunidades. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex flex-col h-full w-full max-w-lg mx-auto bg-warm-gray-900 border border-warm-gray-700 rounded-lg shadow-lg overflow-hidden dark:bg-zinc-900 dark:border-zinc-700 md:max-w-xl lg:max-w-2xl font-mono">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-warm-gray-800 border-b border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <div class="flex items-center space-x-3">
      <div class="w-3 h-3 rounded-full bg-lime-500 animate-pulse"></div>
      <h2 class="text-lg font-bold text-lime-400">System Chat</h2>
    </div>
    <div class="flex space-x-2">
      <button class="p-1 text-warm-gray-400 hover:text-lime-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 rounded-md">
        <svg class="w-5 h-5" 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>

  <!-- Chat Messages Area -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 text-sm scrollbar-thin scrollbar-thumb-lime-600 scrollbar-track-warm-gray-700 dark:scrollbar-thumb-lime-700 dark:scrollbar-track-zinc-800">

    <!-- Incoming Message -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:30 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Hey, anyone online for a quick data-stream?
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-start justify-end">
      <div>
        <div class="flex items-baseline justify-end space-x-2 mb-1">
          <span class="text-xs text-warm-gray-500">10:31 AM</span>
          <span class="font-semibold text-lime-400">You</span>
        </div>
        <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800">
          Affirmative. Ready to link up.
        </div>
      </div>
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

    <!-- Incoming Message with Image -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:35 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Check out this new system schematic.
          <img src="https://picsum.photos/400/250" alt="System Schematic" class="mt-2 w-full max-w-sm rounded-md border border-lime-600 object-cover">
        </div>
      </div>
    </div>

    <!-- Outgoing Message with longer text -->
    <div class="flex items-start justify-end">
        <div>
            <div class="flex items-baseline justify-end space-x-2 mb-1">
                <span class="text-xs text-warm-gray-500">10:40 AM</span>
                <span class="font-semibold text-lime-400">You</span>
            </div>
            <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800 max-w-xs md:max-w-sm">
                Intriguing. The flow seems optimized for neural processing. What's the projected efficiency gain on this version?
            </div>
        </div>
        <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-warm-gray-800 border-t border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 bg-warm-gray-900 border border-warm-gray-600 rounded-lg text-warm-gray-100 placeholder-warm-gray-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:bg-zinc-900 dark:border-zinc-600 dark:text-zinc-100 dark:placeholder-zinc-400">
    <button class="ml-3 p-3 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-offset-2 focus:ring-offset-warm-gray-800 dark:focus:ring-offset-zinc-800">
      <svg class="w-5 h-5 -rotate-45" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </button>
  </div>
</div>

<style>
/* Custom scrollbar for better visual integration with Cyberpunk theme */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--tw-lime-600) var(--tw-warm-gray-700);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-warm-gray-700);
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-600);
  border-radius: 4px;
  border: 2px solid var(--tw-warm-gray-700);
}

/* Dark mode adjustments for scrollbar */
.dark .scrollbar-thin {
  scrollbar-color: var(--tw-lime-700) var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-700);
  border: 2px solid var(--tw-zinc-800);
}

/* Define custom colors for better theming (optional, could be in tailwind config) */
:root {
  --tw-warm-gray-900: #1a1a1a;
  --tw-warm-gray-800: #262626;
  --tw-warm-gray-700: #3f3f3f;
  --tw-warm-gray-600: #525252;
  --tw-warm-gray-500: #737373;
  --tw-warm-gray-400: #a3a3a3;
  --tw-warm-gray-200: #e5e5e5;
  --tw-warm-gray-100: #f5f5f5;
  --tw-lime-500: #84cc16;
  --tw-lime-600: #65a30d;
  --tw-lime-700: #4d7c0f;
  --tw-lime-400: #a3e635;
}

/* Tailwind JIT or custom config can define these */
/* Example for dark mode zinc colors */
.dark {
  --tw-zinc-900: #18181b;
  --tw-zinc-800: #27272a;
  --tw-zinc-700: #3f3f46;
  --tw-zinc-600: #52525b;
  --tw-zinc-500: #71717a;
  --tw-zinc-400: #a1a1aa;
  --tw-zinc-200: #e4e4e7;
  --tw-zinc-100: #f4f4f5;
  --tw-lime-800: #3f6212;
  --tw-lime-700: #4d7c0f; /* Reusing for dark scrollbar thumb */
}

</style>

Componente de ventana de chat - Viajes/Turismo Skeuomórfico

Un componente de ventana de chat complejo y receptivo diseñado para sitios web de viajes / turismo, con un estilo esqueuomórfico con un esquema de color análogo y soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">

  <div class="w-full max-w-4xl h-[80vh] min-h-[600px] flex flex-col rounded-3xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-blue-200 to-indigo-200 dark:from-gray-700 dark:to-gray-900
              border-4 border-solid border-blue-300 dark:border-gray-600
              p-1 sm:p-2">

    <!-- Chat Window Glassmorphic Frame -->
    <div class="flex-1 flex flex-col bg-white/60 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30
                relative overflow-hidden">

      <!-- Header Bar -->
      <div class="flex items-center justify-between p-4 sm:p-5 border-b border-white/50 dark:border-gray-700/50
                  bg-blue-300/80 dark:bg-gray-800/80 rounded-t-2xl shadow-md z-10
                  text-blue-900 dark:text-gray-100 font-semibold text-lg sm:text-xl">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden border-2 border-blue-500 dark:border-gray-500 shadow-md">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
          </div>
          <div>
            <p>Travel Assistant</p>
            <p class="text-sm text-blue-800 dark:text-gray-300 font-normal">Online</p>
          </div>
        </div>
        <div class="flex space-x-3 text-blue-700 dark:text-gray-300">
          <button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg></button>
          <button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg></button>
        </div>
      </div>

      <!-- Chat Messages Area -->
      <div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar">

        <!-- Operator Message -->
        <div class="flex items-start mb-6">
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
          </div>
          <div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
            <div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
            <p class="text-sm sm:text-base text-blue-900 dark:text-gray-100">Hello! I'm your travel assistant. How can I help you plan your next adventure?</p>
          </div>
        </div>

        <!-- User Message -->
        <div class="flex justify-end items-start mb-6">
          <div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
            <div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
            <p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Hi! I'm looking for a tropical getaway in December. Any recommendations?</p>
          </div>
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
          </div>
        </div>

        <!-- Operator Message with Image -->
        <div class="flex items-start mb-6">
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
          </div>
          <div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
            <div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
            <p class="text-sm sm:text-base text-blue-900 dark:text-gray-100 mb-2">December is perfect for the Caribbean! How about a relaxing stay in Barbados?</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Barbados Beach" class="rounded-lg mt-2 shadow-md border border-blue-400/50 dark:border-gray-600/50">
            <p class="text-xs text-blue-800 dark:text-gray-300 mt-2">Click for details or more options!</p>
          </div>
        </div>

        <!-- User Message, more text -->
        <div class="flex justify-end items-start mb-6">
          <div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
            <div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
            <p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Barbados sounds lovely! What about flight and accommodation packages? I'm looking for something all-inclusive and relaxing, perhaps a resort with spa facilities.</p>
          </div>
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
          </div>
        </div>

      </div>

      <!-- Input Area -->
      <div class="p-4 sm:p-5 flex items-center space-x-3 sm:space-x-4 border-t border-white/50 dark:border-gray-700/50
                  bg-gradient-to-r from-blue-300/80 to-indigo-300/80 dark:from-gray-800/80 dark:to-gray-900/80
                  rounded-b-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30 z-10">
        <button class="p-2 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-gray-600 dark:hover:bg-gray-500
                       text-white shadow-md transition-colors duration-200 flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" /></svg>
        </button>
        <input type="text" placeholder="Type your message..." class="flex-1 p-3 sm:p-4 rounded-xl
                      bg-white/80 dark:bg-gray-700/80 border border-blue-400 dark:border-gray-600
                      text-blue-900 dark:text-gray-100 placeholder-blue-700/70 dark:placeholder-gray-300/70
                      shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-gray-500
                      transition-all duration-200 text-sm sm:text-base">
        <button class="p-2 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-purple-600 dark:hover:bg-purple-700
                       text-white shadow-lg transition-colors duration-200 flex-shrink-0 rotate-45 -mt-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Scrollbar Styles (typically in a separate CSS file or a style tag if compiled) -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(var(--tw-fill-blue-200), 0.5); /* Using Tailwind var for blue-200 */
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-blue-500), 0.7); /* Using Tailwind var for blue-500 */
      border-radius: 10px;
      border: 2px solid rgba(var(--tw-fill-blue-200), 0.5); /* Match track color */
    }
    .custom-scrollbar::-m-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-blue-500), 0.7);
      border-radius: 10px;
      border: 2px solid rgba(var(--tw-fill-blue-200), 0.5);
    }
    /* Dark mode scrollbar styles */
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(var(--tw-fill-gray-800), 0.5);
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-gray-600), 0.7);
      border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
    }
    .dark .custom-scrollbar::-m-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-gray-600), 0.7);
      border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
    }
    .shadow-inner-lg {
      box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.1), inset 0 0px 8px rgba(0, 0, 0, 0.05);
    }
    .dark .shadow-inner-lg {
      box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.4), inset 0 0px 8px rgba(0, 0, 0, 0.2);
    }
  </style>

  <!-- Emulate Tailwind CSS variables for custom scrollbar (for browser compatibility) -->
  <script>
    document.documentElement.style.setProperty('--tw-fill-blue-100', '219, 234, 254');
    document.documentElement.style.setProperty('--tw-fill-blue-200', '191, 219, 254');
    document.documentElement.style.setProperty('--tw-fill-blue-300', '147, 197, 253');
    document.documentElement.style.setProperty('--tw-fill-blue-400', '96, 165, 250');
    document.documentElement.style.setProperty('--tw-fill-blue-500', '59, 130, 246');
    document.documentElement.style.setProperty('--tw-fill-purple-100', '233, 213, 255');
    document.documentElement.style.setProperty('--tw-fill-purple-200', '221, 214, 254');
    document.documentElement.style.setProperty('--tw-fill-purple-300', '196, 181, 253');

    document.documentElement.style.setProperty('--tw-fill-gray-700', '55, 65, 81');
    document.documentElement.style.setProperty('--tw-fill-gray-800', '31, 41, 55');
    document.documentElement.style.setProperty('--tw-fill-gray-900', '17, 24, 39');
    document.documentElement.style.setProperty('--tw-fill-gray-600', '75, 85, 99');
    document.documentElement.style.setProperty('--tw-fill-gray-500', '107, 114, 128');

    // Toggles dark mode for demonstration
    // For a real app, integrate with your theme management
    // function toggleDarkMode() {
    //   document.documentElement.classList.toggle('dark');
    // }
    // document.addEventListener('DOMContentLoaded', () => {
    //   // Check for preferred theme or user setting
    //   if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    //     document.documentElement.classList.add('dark');
    //   } else {
    //     document.documentElement.classList.remove('dark');
    //   }
    // });
  </script>
</div>

Componente de ventana de chat

Un complejo componente de ventana de chat inspirado en 3D con una paleta de colores bosque/verde, diseñado para aplicaciones industriales/de fabricación, con capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex h-screen w-full bg-gradient-to-br from-green-50 to-green-100 p-4 dark:from-gray-900 dark:to-gray-800 lg:p-8">
  <div class="relative flex w-full max-w-7xl mx-auto overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-gray-800 lg:flex-row flex-col">

    <!-- Left Sidebar - Contacts/Channels -->
    <div class="relative w-full lg:w-1/4 bg-gradient-to-b from-green-600 to-green-700 p-6 shadow-inner-xl dark:from-green-900 dark:to-green-800 flex flex-col overflow-hidden transform perspective-1000 rotateY-minus-2deg origin-left transition duration-700 hover:rotateY-0 lg:transform-none">
        <div class="absolute inset-0 bg-pattern-grid opacity-10 pointer-events-none"></div>

      <div class="flex items-center justify-between mb-6 pb-4 border-b border-green-500 dark:border-green-700 z-10">
        <h2 class="text-2xl font-bold text-white shadow-text-sm">Contacts</h2>
        <button class="p-2 rounded-full bg-green-500 text-white hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400"><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="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg></button>
      </div>

      <div class="mb-6 z-10">
        <div class="relative flex items-center">
          <input type="text" placeholder="Search..." class="w-full p-3 pl-10 rounded-full bg-green-500 bg-opacity-70 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-opacity-100 dark:bg-green-700 dark:bg-opacity-70 dark:focus:ring-green-600 dark:focus:bg-opacity-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 text-white h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
        </div>
      </div>

      <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
        <!-- Contact Item -->
        <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
          <div class="ml-4 flex-1">
            <p class="text-lg font-semibold text-white shadow-text-sm">John Doe</p>
            <p class="text-white text-sm opacity-80 truncate">Ok, the new batch is ready...</p>
          </div>
          <span class="text-xs text-white opacity-70 ml-2">11:30 AM</span>
        </div>
        <!-- Active Contact Item -->
        <div class="flex items-center p-3 rounded-xl bg-green-400 bg-opacity-70 border border-green-300 dark:bg-green-600 dark:bg-opacity-70 transform translateZ-20 shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
          <div class="ml-4 flex-1">
            <p class="text-lg font-bold text-white shadow-text-sm">Jane Smith</p>
            <p class="text-white text-sm opacity-90 truncate">Confirmed order #123.</p>
          </div>
          <span class="text-xs text-white font-medium ml-2">Now</span>
        </div>
        <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            <div class="ml-4 flex-1">
              <p class="text-lg font-semibold text-white shadow-text-sm">Robert Garcia</p>
              <p class="text-white text-sm opacity-80 truncate">Machine A-3 needs maintenance.</p>
            </div>
            <span class="text-xs text-white opacity-70 ml-2">Yesterday</span>
          </div>
          <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
            <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            <div class="ml-4 flex-1">
              <p class="text-lg font-semibold text-white shadow-text-sm">Emily White</p>
              <p class="text-white text-sm opacity-80 truncate">About the next production run...</p>
            </div>
            <span class="text-xs text-white opacity-70 ml-2">Fri</span>
          </div>
      </div>
    </div>

    <!-- Right Chat Area -->
    <div class="relative flex-1 flex flex-col bg-green-50 bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 p-6 transform translateZ-10 transition-transform duration-700 hover:translateZ-20 lg:transform-none">
        <div class="absolute inset-0 bg-texture-subtle opacity-10 pointer-events-none"></div>

      <!-- Chat Header -->
      <div class="flex items-center justify-between pb-4 border-b border-green-200 dark:border-gray-600 mb-6 z-10">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-14 h-14 rounded-full border-2 border-green-500 dark:border-green-400 shadow-lg">
          <div class="ml-4">
            <h3 class="text-xl font-bold text-green-800 dark:text-white">Jane Smith</h3>
            <p class="text-green-600 dark:text-green-300 text-sm">Online <span class="text-green-500 dark:text-green-400 text-xs">(Production Manager)</span></p>
          </div>
        </div>
        <div class="flex space-x-3">
          <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-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="M3 5v10a2 2 0 002 2h2v4l4-4h4a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2zM7 7h10M7 11h10M7 15h6" /></svg>
          </button>
          <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages -->
      <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
        <!-- Received Message -->
        <div class="flex items-end">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
          <div class="max-w-[70%] bg-white p-4 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
            <p class="text-sm text-gray-700 dark:text-gray-200">Good morning, John. The new batch of components for the A-series assembly line is ready for inspection. We've just completed the QC checks.</p>
            <span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:45 AM</span>
          </div>
        </div>

        <!-- Sent Message -->
        <div class="flex justify-end">
          <div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
            <p class="text-sm">Excellent! Please send over the inspection report and high-res photos. I'll need to forward it to the clients by end of day.</p>
            <span class="block text-right text-xs text-white opacity-80 mt-2">10:48 AM</span>
          </div>
        </div>

        <!-- Received Message with Image -->
        <div class="flex items-end">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
          <div class="max-w-[70%] bg-white p-3 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
            <p class="text-sm text-gray-700 mb-2 dark:text-gray-200">Here's a preview of the report and some detailed shots:</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Factory Image" class="w-full rounded-lg mb-2 shadow-md">
            <img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="w-full rounded-lg shadow-md">
            <span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:55 AM</span>
          </div>
        </div>

        <!-- Sent Message -->
        <div class="flex justify-end">
            <div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
              <p class="text-sm">Looks good, Jane. The precision on these is impeccable. Great work by the team!</p>
              <span class="block text-right text-xs text-white opacity-80 mt-2">10:58 AM</span>
            </div>
        </div>

      </div>

      <!-- Chat Input -->
      <div class="mt-6 pt-4 border-t border-green-200 dark:border-gray-600 flex items-center space-x-3 z-10">
        <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" /></svg>
        </button>
        <input type="text" placeholder="Type your message..." class="flex-1 p-4 rounded-full bg-green-100 border border-green-300 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400 transform translateZ-5">
        <button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-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="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
        </button>
        <button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* Define CSS variables for easier theme switching if needed (though Tailwind dark: handles most) */
:root {
  --green-primary: #34d399; /* emerald-500 */
  --green-dark: #059669; /* emerald-600 */
  --green-light: #a7f3d0; /* emerald-200 */
}

.dark {
  --green-primary: #10b981; /* emerald-600 */
  --green-dark: #065f46; /* emerald-800 */
  --green-light: #047857; /* emerald-700 */
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(var(--green-light-rgb, 240, 253, 244), 0.3); /* green-100 with opacity */
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(var(--gray-700-rgb, 55, 65, 81), 0.3);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--green-dark);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--green-primary);
}

/* 3D Effects */
.perspective-1000 {
  perspective: 1000px;
}

.rotateY-minus-2deg {
  transform: rotateY(-2deg); /* Initial slight rotation for 3D depth */
}

.shadow-inner-xl {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.dark .shadow-inner-xl {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.shadow-text-sm {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Pseudo 3D transforms */
.transform {
  transform-style: preserve-3d;
}

.translateZ-5 {
  transform: translateZ(5px);
}
.hover\:translateZ-10:hover {
  transform: translateZ(10px);
}
.translateZ-1_5-2deg { /* for active contact */
    transform: translateZ(20px);
}
.translateZ-10 {
  transform: translateZ(10px);
}
.hover\:translateZ-20:hover {
  transform: translateZ(20px);
}

/* Background Patterns for 3D depth */
.bg-pattern-grid {
  background-image: linear-gradient(0deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
}

.bg-texture-subtle {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239e9e9e' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}

.dark .bg-texture-subtle {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234a4a4a' fill-opacity='0.25' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 1023px) {
    /* For smaller screens, remove 3D rotation and flatten perspective */
    .lg\:transform-none {
        transform: none !important;
        perspective: none !important;
    }
    .lg\:w-1\/4 {
        width: 100%;
        height: 300px; /* Limit height of sidebar on smaller screens */
    }
    .lg\:flex-col {
        flex-direction: column;
    }
}
</style>

Componente de ventana de chat

Un componente de ventana de chat simple y receptivo con un diseño orgánico/inspirado en la naturaleza, combinación de colores neón/eléctrico y soporte para modo oscuro, adecuado para sistemas de reservas/reservas.

Abrir Vista previa

                <div class="flex justify-center items-center h-screen bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="relative w-full max-w-sm lg:max-w-md xl:max-w-lg bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-105 group">
    <!-- Organic Top Shape -->
    <div class="absolute top-0 left-0 right-0 h-40 bg-gradient-to-r from-teal-400 via-blue-500 to-indigo-600 dark:from-teal-600 dark:via-blue-700 dark:to-indigo-800 rounded-bl-[40%] rounded-br-[30%] group-hover:from-teal-300 group-hover:via-blue-400 group-hover:to-indigo-500 transition-all duration-300 ease-in-out"></div>

    <!-- Header -->
    <div class="relative z-10 flex items-center justify-between p-6 pb-2 pt-8">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-teal-300 dark:border-teal-500 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-xl font-bold text-white drop-shadow-md">Scheduler Bot</h2>
          <p class="text-sm text-blue-100 dark:text-blue-200 text-opacity-80">Online</p>
        </div>
      </div>
      <button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Chat Body -->
    <div class="relative z-0 p-6 pt-4 h-96 overflow-y-auto custom-scrollbar-neon" style="scrollbar-width: thin; -ms-overflow-style: none;">
      <!-- Receiver Message -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.1s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">Hello! How can I assist you with your booking today?</p>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-1">10:00 AM</span>
        </div>
      </div>

      <!-- User Message -->
      <div class="flex justify-end mb-4 animate-fade-in" style="animation-delay: 0.2s;">
        <div class="bg-gradient-to-tr from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">I'd like to book an appointment for a health check-up next week.</p>
          <span class="block text-xs text-purple-100 text-opacity-75 mt-1">10:02 AM</span>
        </div>
      </div>

      <!-- Receiver Message (Options) -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.3s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg">
          <p class="text-sm mb-2">Great! Please select your preferred day:</p>
          <div class="flex flex-wrap gap-2">
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Monday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Wednesday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Friday</button>
          </div>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-2">10:03 AM</span>
        </div>
      </div>
    </div>

    <!-- Input Area -->
    <div class="relative p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-850">
      <div class="flex items-center space-x-2">
        <input type="text" placeholder="Type your message..." class="flex-grow py-2 px-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 transition-shadow duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500 shadow-inner" />
        <button class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-teal-600 dark:to-blue-700 p-3 rounded-full text-white shadow-lg hover:from-teal-300 hover:to-blue-400 dark:hover:from-teal-500 dark:hover:to-blue-600 transition-all duration-300 ease-in-out transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.108 5.768a2 2 0 0 1 2.828 0L20 12l-12.064 6.232a2 2 0 0 1-2.828-2.828L14.172 12 5.108 5.768z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Scrollbar Styles (can be moved to a <style> tag or CSS file) -->
  <style>
    .custom-scrollbar-neon::-webkit-scrollbar {
      width: 6px;
    }

    .custom-scrollbar-neon::-webkit-scrollbar-track {
      background: transparent;
    }

    .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #0ea5e9, #a855f7);
      border-radius: 10px;
    }
    
    .dark .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #2563eb, #7c3aed);
    }

    .custom-scrollbar-neon {
      scrollbar-color: #0ea5e9 #f1f5f9; /* thumb and track for Firefox */
    }

    .dark .custom-scrollbar-neon {
      scrollbar-color: #2563eb #1f2937; /* thumb and track for Firefox in dark mode */
    }

    /* Animations */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
      animation: fade-in 0.5s ease-out forwards;
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in-up {
      animation: fade-in-up 0.6s ease-out forwards;
    }
  </style>
</div>

Componente de ventana de chat

Un componente de ventana de chat moderno y receptivo con una estética de diseño 3D, un esquema de color neutro cálido y soporte completo para el modo oscuro, adecuado para aplicaciones de tecnología / SaaS.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="relative w-full max-w-4xl h-[calc(100vh-4rem)] md:h-[600px] flex flex-col bg-gradient-to-br from-warm-beige-100 to-warm-beige-200 dark:from-gray-800 dark:to-gray-850 rounded-3xl shadow-2xl overflow-hidden transform perspective-1000">

    <!-- 3D Overlay/Bevel Effect -->
    <div class="absolute inset-0 rounded-3xl pointer-events-none" style="
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.05) 100%),
                  linear-gradient(225deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 0 2px rgba(255,255,255,0.05),
                    inset 5px 5px 10px rgba(0,0,0,0.1), inset -5px -5px 10px rgba(255,255,255,0.05);
        filter: blur(0.5px);
    "></div>

    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 lg:p-6 border-b border-warm-beige-300/50 dark:border-gray-700/50 shadow-inner-top z-10" 
         style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover shadow-md transition-transform duration-300 hover:scale-105" 
             src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h2>
          <p class="text-sm text-gray-600 dark:text-gray-300">Online</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.3 11a1 1 0 00.729.584l4.249.708a1 1 0 01.921.235l4.629 4.629a1 1 0 01.235.921l-.708 4.249a1 1 0 00-.584.729L14 20.7a1 1 0 01-.684.948H5a2 2 0 01-2-2V5z"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" 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="M15 10a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 1.5V6a2 2 0 002 2h3.5m-3.5 13.5v-4.5a2 2 0 00-2-2H8"></path></svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Area -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 md:space-y-6 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-warm-beige-200 dark:scrollbar-track-gray-800">

      <!-- Received Message Example (3D card) -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Hi Alice, how are you doing today? I wanted to check in on the latest project updates.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:30 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Sent Message Example (3D card) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>I'm good, thanks! The project's on track. I'll send you a brief update document by the end of the day.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:35 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Another Received Message -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Sounds perfect! Looking forward to it.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:36 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Image Message (Sent) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-2 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <img src="https://picsum.photos/400/300" alt="Image attachment" class="rounded-lg mb-2 shadow-md">
          <p class="text-sm">Check out this new dashboard mock-up.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:40 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

    </div>

    <!-- Message Input Area -->
    <div class="p-4 sm:p-5 lg:p-6 border-t border-warm-beige-300/50 dark:border-gray-700/50 flex items-center space-x-3 sm:space-x-4 shadow-inner-bottom z-10" 
         style="box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);">
      <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
        <svg class="w-5 h-5" 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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
      </button>
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-warm-beige-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 border border-warm-beige-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-warm-beige-400 dark:focus:ring-blue-500 shadow-inner 3d-input-effect" 
             style="box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.1);">
      <button class="p-2 rounded-full bg-gradient-to-br from-blue-400 to-blue-500 dark:from-blue-600 dark:to-blue-700 text-white hover:from-blue-500 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-blue-800 transition-colors duration-200 transform hover:scale-105 shadow-lg message-send-button">
        <svg class="w-5 h-5" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      </button>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D effect / Scrollbar / Colors -->
<style>
  /* Warm Neutral Colors */
  .bg-warm-beige-100 { background-color: #f7f3ed; } /* Lightest */
  .bg-warm-beige-200 { background-color: #ede7de; } /* Light */
  .bg-warm-beige-300 { background-color: #dcd3c4; } /* Medium */
  .bg-warm-beige-300\/70 { background-color: rgba(220, 211, 196, 0.7); }
  .bg-warm-beige-400 { background-color: #c9bfb0; } /* Dark */
  .border-warm-beige-300 { border-color: #dcd3c4; }
  .border-warm-beige-300\/50 { border-color: rgba(220, 211, 196, 0.5); }
  .focus\:ring-warm-beige-400:focus { --tw-ring-color: #c9bfb0; }

  /* Dark Mode specific background-colors for gradients */
  .dark\:from-gray-850 { --tw-gradient-from: #1f2937; --tw-gradient-to: rgba(31, 41, 55, 0); }
  .dark\:to-gray-850 { --tw-gradient-to: #1f2937; }
  .dark\:from-gray-750 { --tw-gradient-from: #374151; --tw-gradient-to: rgba(55, 65, 81, 0); }
  .dark\:to-gray-750 { --tw-gradient-to: #374151; }

  /* Custom Scrollbar for Webkit */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
  }
  .scrollbar-thumb-gray-400 { --tw-scrollbar-thumb: #9ca3af; }
  .scrollbar-track-warm-beige-200 { --tw-scrollbar-track: #ede7de; }
  .dark .scrollbar-thumb-gray-600 { --tw-scrollbar-thumb: #4b5563; }
  .dark .scrollbar-track-gray-800 { --tw-scrollbar-track: #1f2937; }

  /* For Chrome, Safari, etc. */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track);
    border-radius: var(--tw-scrollbar-track-rounded);
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--tw-scrollbar-thumb);
    border-radius: var(--tw-scrollbar-thumb-rounded);
    border: 2px solid var(--tw-scrollbar-track);
  }
  /* Tailwind utility placeholders */
  .scrollbar-thumb-rounded-full::-webkit-scrollbar-thumb { border-radius: 9999px; }
  .scrollbar-track-rounded-full::-webkit-scrollbar-track { border-radius: 9999px; }

  /* 3D specific effects */
  .perspective-1000 {
    perspective: 1000px;
  }
  .transform-rotate-x-1 {
    transform: rotateX(1deg);
  }
  .transform--rotate-x-1 {
    transform: rotateX(-1deg);
  }
  .shadow-inner-top {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);
  }
   .shadow-inner-bottom {
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);
  }

  /* Hide the triangle using clip-path on the bubble pseudo-elements */
  .message-send-button {
    position: relative;
    overflow: hidden;
  }

  .message-send-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease-out;
    opacity: 0;
  }

  .message-send-button:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

</style>

Componente de ventana de chat

Un componente de ventana de chat simple, limpio y profesional con un esquema de color azul corporativo, adecuado para entornos comerciales, particularmente en contextos de moda / belleza. Cuenta con diseño responsivo, compatibilidad con modo oscuro y funcionalidad básica de chat.

Abrir Vista previa

                <div class="flex flex-col h-[500px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-blue-600 dark:bg-blue-800 text-white shadow-md">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full border-2 border-white dark:border-blue-300" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div>
        <p class="font-semibold text-lg">Support Agent</p>
        <p class="text-sm text-blue-100 dark:text-blue-200">Online</p>
      </div>
    </div>
    <button class="text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 rounded-full p-1">
      <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>

  <!-- Chat Messages Area -->
  <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-blue-50 dark:bg-gray-700">

    <!-- Incoming Message Example -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Hello! How can I assist you with your fashion queries today?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message Example -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">I'm looking for advice on styling a new dress for a professional event.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block text-right mt-1">10:02 AM</span>
      </div>
    </div>

    <!-- Incoming Message Example 2 -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Certainly! Could you tell me more about the dress's color and cut?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:03 AM</span>
      </div>
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-blue-100 dark:bg-gray-900 border-t border-blue-200 dark:border-gray-700">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full border border-blue-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 text-sm">
    <button class="ml-3 p-3 bg-blue-600 dark:bg-blue-700 text-white rounded-full hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-900">
      <svg class="w-5 h-5 -rotate-45" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </button>
  </div>

</div>