Currently HTML and TailwindCSS code is generated.
<div class="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-2/5 bg-white shadow-lg rounded-t-lg">
<div class="flex justify-around items-center p-4">
<div class="flex flex-col items-center">
<svg class="w-6 h-6 text-gray-500 hover:text-blue-500 transition duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
<span class="text-gray-500 hover:text-blue-500 transition duration-200">Item 1</span>
</div>
<div class="flex flex-col items-center">
<svg class="w-6 h-6 text-gray-500 hover:text-blue-500 transition duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2a10 10 0 00-10 10h20A10 10 0 0012 2z" />
</svg>
<span class="text-gray-500 hover:text-blue-500 transition duration-200">Item 2</span>
</div>
<div class="flex flex-col items-center">
<svg class="w-6 h-6 text-gray-500 hover:text-blue-500 transition duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18v18H3V3z" />
</svg>
<span class="text-gray-500 hover:text-blue-500 transition duration-200">Item 3</span>
</div>
</div>
</div>
<div class="flex flex-col h-screen bg-gray-100">
<div class="flex items-center justify-between p-4 bg-blue-600 text-white">
<h1 class="text-lg font-bold">Chat App</h1>
<button class="bg-blue-800 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">Logout</button>
</div>
<div class="flex-grow overflow-auto p-4">
<div class="bg-white rounded-lg shadow-md p-4 mb-4">
<div class="flex items-center mb-2">
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-2"/>
<span class="font-semibold">User 1</span>
</div>
<p class="text-gray-700">Hello! How are you today?</p>
</div>
<div class="bg-white rounded-lg shadow-md p-4 mb-4">
<div class="flex items-center mb-2">
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-2"/>
<span class="font-semibold">User 2</span>
</div>
<p class="text-gray-700">I'm good, thanks! And you?</p>
</div>
<!-- More chat messages here -->
</div>
<div class="p-4 bg-gray-200">
<input type="text" placeholder="Type your message..." class="w-full p-2 border border-gray-300 rounded"/>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded mt-2">Send</button>
</div>
</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600 p-4">
<h1 class="text-4xl font-bold text-white">Header Title</h1>
<p class="text-lg font-medium text-white">Subtitle or additional text here</p>
</div>