Fenêtre de chat rétro pastel
Un composant de fenêtre de chat à thème rétro avec des couleurs pastel, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, de style Glassmorphism, avec une palette de couleurs pastel, conçu pour la consommation de contenu. Il dispose d’une mise en page réactive et d’un support de thème sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat complexe et réactif avec une esthétique de conception monospace/développeur, une palette de couleurs automnales, optimisé pour les applications de sport/fitness, y compris la prise en charge du mode sombre et des éléments interactifs.
Composant 50 de la fenêtre de chat
Un composant de fenêtre de chat minimaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend des images d’espace réservé et des images d’avatar provenant de sources d’espace réservé aléatoires.