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 conçu dans le style Brutalism avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.
Composant de fenêtre de chat avec conception 3D, réactivité et mode sombre
Un composant de fenêtre de chat réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des avatars et des images de repère.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec des micro-interactions axées sur des animations attrayantes. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.