Компонент окна чата
Адаптивный компонент окна чата с элементами 3D-дизайна и поддержкой темной темы с использованием Tailwind CSS. JavaScript не требуется.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4"> <div class="flex-col flex flex-grow w-full max-w-xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden"> <div class="flex flex-col flex-grow h-0 p-4 overflow-auto"> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> </div> <div class="bg-gray-300 dark:bg-gray-700 p-4"> <input class="flex items-center h-10 w-full rounded px-3 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200" type="text" placeholder="Type your message…"> </div> </div> </div>Связанные компоненты
Компонент окна чата
Компонент неоморфного окна чата, разработанный для приложений электронной коммерции, с темным режимом и адаптивным дизайном с использованием Tailwind CSS.
Компонент окна чата 50
Минималистичный компонент окна чата с адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS. Он включает в себя замещающие изображения и изображения аватаров из случайных источников-заполнителей.
Компонент окна чата
Минималистичный компонент окна чата для сайтов электронной коммерции, отличающийся цветовой схемой в оттенках серого, умеренной сложностью и отзывчивостью с поддержкой темного режима. Создан с использованием HTML и Tailwind CSS.