3D 디자인, 응답성 및 다크 모드가 있는 채팅 창 구성 요소

<div class="flex flex-col h-[600px] antialiased bg-gray-100 dark:bg-gray-800 relative overflow-hidden rounded-lg shadow-lg">
    <!-- 3D Effect div (optional, for background depth) -->
    <div class="absolute inset-0 z-0" style="background-image: linear-gradient(to bottom right, #3b82f6, #9333ea); transform: perspective(1000px) rotateY(5deg) rotateX(5deg);"></div>

    <div class="flex-1 p:2 sm:p-6 flex flex-col z-10">
        <div class="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-200 dark:bg-gray-700 p-4 h-full">
            <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">
                        <!-- Incoming Message (example) -->
                        <div class="col-start-1 col-end-8 p-3 rounded-lg">
                            <div class="flex flex-row items-center">
                                <img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
                                    <div>Hey, how are you doing?</div>
                                </div>
                            </div>
                        </div>
                        <!-- Outgoing Message (example) -->
                        <div class="col-start-6 col-end-13 p-3 rounded-lg">
                            <div class="flex items-center justify-start flex-row-reverse">
                                <img src="https://randomuser.me/api/portraits/thumb/men/86.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-600 py-2 px-4 shadow rounded-xl">
                                    <div>I'm doing great, thanks for asking!</div>
                                    <div class="absolute text-xs bottom-0 right-0 -mb-5 mr-2 text-gray-500 dark:text-gray-300">12:30 PM</div>
                                </div>
                            </div>
                        </div>
                        <!-- Incoming Message with Image (example) -->
                          <div class="col-start-1 col-end-8 p-3 rounded-lg">
                            <div class="flex flex-row items-center">
                                <img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
                                    <div>Check this out!</div>
                                    <img src="https://picsum.photos/seed/picsum/200/300" alt="placeholder image" class="mt-2 rounded-md">
                                </div>
                            </div>
                        </div>
                        <!-- Add more messages here following the same structure -->
                    </div>
                </div>
            </div>
            <div class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-600 w-full px-4">
                <div>
                    <button class="flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <svg class="w-5 h-5" 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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.414 6.586a2 2 0 002.828 2.828l6.586-6.586m0 0a2 2 0 102.828-2.828m-8.485.071l7.071 7.071m2.121-7.071l-.707 -.707m10.607 10.607l-.707 -.707m-3.536-3.536l-.707 -.707"></path>
                        </svg>
                    </button>
                </div>
                <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-700 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>