Currently HTML and TailwindCSS code is generated.
<div class="relative w-full max-w-xl mx-auto">
<div class="flex overflow-hidden">
<div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
<img src="image1.jpg" alt="Image 1" class="w-full h-auto">
</div>
<div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
<img src="image2.jpg" alt="Image 2" class="w-full h-auto">
</div>
<div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
<img src="image3.jpg" alt="Image 3" class="w-full h-auto">
</div>
</div>
<button class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
❮
</button>
<button class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
❯
</button>
</div>
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Recent Files</div>
<ul class="mt-2 text-gray-500">
<li class="py-2 border-b">File 1.txt</li>
<li class="py-2 border-b">Presentation.pptx</li>
<li class="py-2 border-b">Image.png</li>
<li class="py-2 border-b">Document.docx</li>
<li class="py-2">Spreadsheet.xlsx</li>
</ul>
</div>
</div>
</div>
<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>