Maps Component
A responsive Maps Component designed with Glassmorphism style, featuring a dark theme and Tailwind CSS classes. Suitable for dashboards with data visualization and control panels.
HTML Code
<div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
<img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
<div>
<p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
<p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
<div class="flex justify-between mt-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
</div>
</div>
</div>
Related Components
Maps Component
A responsive maps component designed with skeuomorphic style, featuring soft pastel colors and a rich interface suitable for social media networking. The component supports both light and dark modes and includes multiple interactive elements.
Playful Maps Component for Gaming
A simple, playful, and responsive map component suitable for gaming websites, featuring bright jewel tones, rounded elements, and dark mode support.
Brutalist Dashboard Map Component
A brutalist-style dashboard map component with vibrant colors, high contrast, complex interactive elements, responsive design, and dark theme support using Tailwind CSS.