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 responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS. No se requiere JavaScript.
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.
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.