Maps Component

A responsive maps component styled with neumorphism, supporting dark theme and featuring placeholder images.

Preview

HTML Code

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Component</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-xl w-full md:w-96">
        <img src="https://picsum.photos/400/300" alt="Placeholder Map" class="rounded-lg w-full h-auto" />
    </div>
    <div class="flex mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-white dark:border-gray-800 shadow-md" />
        <div class="ml-3">
            <p class="text-sm text-gray-700 dark:text-gray-300">User Name</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Location</p>
        </div>
    </div>
</div>

Related Components

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.

Open

Maps Component

Maps Component with Skeuomorphism design, Triadic color scheme, Moderate complexity, and Social Media purpose. Responsive design with dark theme support using Tailwind CSS.

Open

3D_Neon_Maps_Component

A complex 3D-inspired maps component with a neon/electric color scheme, suitable for a portfolio to showcase locations or projects. It features glowing elements, rich interactive-like UI, and full responsiveness with dark mode support.

Open