组件 地图 Maps 组件

Maps 组件

一个简单的 Maps 组件,具有 Glassmorphism 设计、Grayscale 配色方案和简单的布局。它响应迅速并支持深色模式。

预览

HTML 代码

<div class="relative flex items-center justify-center w-full h-96 bg-gray-300 dark:bg-gray-700 overflow-hidden" style="backdrop-filter: blur(10px); background-color: rgba(209, 213, 219, 0.3); dark:background-color: rgba(55, 65, 81, 0.3);">
  <div class="absolute inset-0 z-0">
    <img src="https://picsum.photos/seed/maps/800/600" alt="Map background" class="object-cover w-full h-full">
  </div>
  <div class="relative z-10 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-lg shadow-lg text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Find Us Here</h2>
    <p class="text-gray-700 dark:text-gray-300">Our location on the map.</p>
  </div>
</div>

相关组件

用于游戏的 Playful Maps 组件

一个简单、有趣且响应迅速的地图组件,适用于游戏网站,具有明亮的宝石色调、圆润的元素和深色模式支持。

打开

IndustrialVibrantMapsComponent(工业VibrantMaps组件)

一个响应式交互式地图组件,具有工业、原始的美学和充满活力的配色方案,适用于技术/SaaS 应用程序。包括深色模式支持。

打开

复古地图组件

一个简单、响应迅速且与深色模式兼容的地图组件,具有复古/复古美学、充满活力的配色方案和业务/公司用途,使用 Tailwind CSS 构建。

打开