Maps Component
A responsive Maps Component with Neumorphism style, dark mode support, and placeholder image.
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maps Component</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.neumorphism-card {
border-radius: 20px;
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe,
-7px -7px 15px #ffffff;
transition: all 0.3s ease;
}
.neumorphism-card:hover {
box-shadow: 5px 5px 10px #bebebe,
-5px -5px 10px #ffffff;
}
.dark .neumorphism-card {
background: #333333;
box-shadow: 7px 7px 15px #2b2b2b,
-7px -7px 15px #3b3b3b;
}
.dark .neumorphism-card:hover {
box-shadow: 5px 5px 10px #2b2b2b,
-5px -5px 10px #3b3b3b;
}
</style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 p-8">
<div class="neumorphism-card max-w-sm mx-auto overflow-hidden md:max-w-md dark:text-white">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://images.unsplash.com/photo-1594399418882-cf049f2a25c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Map image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Location</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Central Park</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">A large urban park in New York City.</p>
<div class="mt-4 flex items-center">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
<span class="ml-2 text-gray-500 dark:text-gray-400">New York, NY</span>
</div>
</div>
</div>
</div>
</body>
</html>Related Components
Maps Component
A web component designed for social media interfaces, featuring a brutalist design with a grayscale color scheme, suitable for displaying maps with locations marked.