Ventana de chat retro pastel
Un componente de ventana de chat de temática retro con colores pastel, diseño responsivo y compatibilidad con modo oscuro mediante Tailwind CSS.
Código HTML
<div class="flex flex-col h-screen antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<div class="flex flex-row h-full w-full overflow-x-hidden">
<div class="flex flex-col flex-auto h-full p-6">
<div class="flex flex-col flex-auto flex-shrink-0 rounded-lg bg-gray-200 dark:bg-gray-800 h-full p-4">
<div class="flex flex-col h-full overflow-x-auto mb-4">
<div class="flex flex-col h-full">
<div class="grid grid-cols-12 gap-y-2">
<div class="col-start-1 col-end-8 p-3 rounded-lg">
<div class="flex flex-row items-center">
<div
class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
>
A
</div>
<div
class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
>
<div>Hey How are you doing today?</div>
</div>
</div>
</div>
<div class="col-start-1 col-end-8 p-3 rounded-lg">
<div class="flex flex-row items-center">
<div
class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
>
A
</div>
<div
class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
>
<div>
Wow, I'm loving this retro chat window design! The pastel colors are so calming.
</div>
</div>
</div>
</div>
<div class="col-start-6 col-end-13 p-3 rounded-lg">
<div class="flex items-center justify-start flex-row-reverse">
<div
class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
>
B
</div>
<div
class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
>
<div>I'm fine living large</div>
</div>
</div>
</div>
<div class="col-start-6 col-end-13 p-3 rounded-lg">
<div class="flex items-center justify-start flex-row-reverse">
<div
class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
>
B
</div>
<div
class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
>
<div>Looks like something out of a late 80s computer interface. Totally tubular!</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-700 w-full px-4"
>
<div class="flex-grow ml-4">
<div class="relative w-full">
<input
type="text"
class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-800 dark:text-white"
/>
</div>
</div>
<div class="ml-4">
<button
class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
>
<span>Send</span>
<span class="ml-2">
<svg
class="w-4 h-4 transform rotate-45 -mt-px"
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>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de ventana de chat
Un componente de ventana de chat minimalista para sitios de comercio electrónico, con un esquema de color en escala de grises, complejidad moderada y capacidad de respuesta con soporte para modo oscuro. Construido con HTML y Tailwind CSS.
Componente de ventana de chat con diseño 3D, capacidad de respuesta y modo oscuro
Un componente de ventana de chat responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS. Incluye avatares e imágenes de marcador de posición.
Componente de ventana de chat
Un componente de ventana de chat receptivo con un esquema de color triádico, microinteracciones y soporte de modo oscuro, diseñado para el comercio electrónico. Cuenta con un encabezado de chat, una lista de mensajes con mensajes del remitente/receptor y una entrada de mensajes.