组件 地图 复古地图组件

复古地图组件

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

预览

HTML 代码

<section class="bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Location</h2>
    <div class="relative">
      <img src="https://picsum.photos/seed/maps/800/400" alt="Map of our location" class="w-full h-96 object-cover rounded-lg shadow-lg">
      <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50 rounded-lg"></div>
      <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
        <h3 class="text-2xl font-semibold mb-2">Find Us Here</h3>
        <p class="text-gray-300">123 Main Street, Anytown, USA</p>
      </div>
    </div>
  </div>
</section>

相关组件

地图组件

地图组件,具有拟物化设计、三色配色方案、中等复杂程度,适用于社交媒体目的。采用Tailwind CSS进行响应式设计,支持暗主题。

打开

地图组件

一个具有玻璃风格设计的地图组件,具有响应效果和深色主题支持,利用 Tailwind CSS。

打开

地图组件

具有深色模式支持的响应式地图组件,使用Tailwind CSS。

打开