Currently HTML and TailwindCSS code is generated.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2 text-gray-800">Project Title 1</h2>
<p class="text-gray-600 mb-4">A brief description of the project showcasing its main features and technologies used.</p>
</div>
<div class="flex justify-between p-4 bg-gray-100">
<a href="https://github.com/your-repo-1" class="text-blue-500 hover:text-blue-700 font-semibold">GitHub</a>
<a href="https://live-link-1.com" class="text-blue-500 hover:text-blue-700 font-semibold">Live Demo</a>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2 text-gray-800">Project Title 2</h2>
<p class="text-gray-600 mb-4">A brief description of the project showcasing its main features and technologies used.</p>
</div>
<div class="flex justify-between p-4 bg-gray-100">
<a href="https://github.com/your-repo-2" class="text-blue-500 hover:text-blue-700 font-semibold">GitHub</a>
<a href="https://live-link-2.com" class="text-blue-500 hover:text-blue-700 font-semibold">Live Demo</a>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2 text-gray-800">Project Title 3</h2>
<p class="text-gray-600 mb-4">A brief description of the project showcasing its main features and technologies used.</p>
</div>
<div class="flex justify-between p-4 bg-gray-100">
<a href="https://github.com/your-repo-3" class="text-blue-500 hover:text-blue-700 font-semibold">GitHub</a>
<a href="https://live-link-3.com" class="text-blue-500 hover:text-blue-700 font-semibold">Live Demo</a>
</div>
</div>
</div>
<div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden">
<div class="p-5">
<h2 class="text-xl font-bold mb-4">Restaurant Menu</h2>
<ul class="space-y-3">
<li class="flex justify-between p-2 border-b">
<span class="font-semibold">Margherita Pizza</span>
<span class="text-gray-600">$12.99</span>
</li>
<li class="flex justify-between p-2 border-b">
<span class="font-semibold">Caesar Salad</span>
<span class="text-gray-600">$9.99</span>
</li>
<li class="flex justify-between p-2 border-b">
<span class="font-semibold">Grilled Salmon</span>
<span class="text-gray-600">$18.99</span>
</li>
<li class="flex justify-between p-2 border-b">
<span class="font-semibold">Spaghetti Carbonara</span>
<span class="text-gray-600">$14.99</span>
</li>
<li class="flex justify-between p-2 border-b">
<span class="font-semibold">Chocolate Cake</span>
<span class="text-gray-600">$6.99</span>
</li>
<li class="flex justify-between p-2 border-b">
<span class="font-semibold">Lemonade</span>
<span class="text-gray-600">$3.99</span>
</li>
</ul>
</div>
</div>
<div class="bg-white shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Activity Geomap</h2>
<div class="relative h-60">
<img src="your-geomap-image-url.jpg" alt="Activity Geomap" class="w-full h-full object-cover rounded-lg">
<div class="absolute bottom-0 left-0 p-4">
<span class="bg-gray-800 text-white text-sm px-2 py-1 rounded">Active Areas</span>
</div>
</div>
<div class="mt-4">
<p class="text-gray-700">Explore the regions where activities are taking place. Hover over the map for more details.</p>
</div>
</div>