Компонент 3D Maps
Адаптивный компонент 3D-карты для бизнес-сайтов с поддержкой темного режима.
HTML-код
<section class="py-10 text-gray-700 bg-gray-100 dark:bg-gray-800 dark:text-gray-300">
<div class="map-container container mx-auto px-4 relative" style="perspective: 1000px;">
<div class="map-element" style="transform: rotateX(20deg) rotateZ(-10deg);">
<!-- Replace with an actual map embed or a static image that looks like a map -->
<img src="https://picsum.photos/seed/map/800/600" alt="Company Location Map" class="w-full h-auto shadow-lg rounded-lg">
</div>
<div class="map-overlay absolute top-0 left-0 w-full h-full flex items-center justify-center">
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-xl text-center" style="transform: translateZ(50px);">
<h3 class="text-xl font-bold mb-2">Find Us</h3>
<p class="text-gray-600 dark:text-gray-400">123 Business St, Corporate City</p>
<a href="#" class="mt-4 inline-block bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">Get Directions</a>
</div>
</div>
</div>
</section>Связанные компоненты
Компонент «Карты»
Компонент адаптивных карт, выполненный в скевоморфном стиле, с мягкими пастельными тонами и богатым интерфейсом, подходящим для социальных сетей. Компонент поддерживает как светлый, так и темный режимы и включает в себя множество интерактивных элементов.
Компонент «Карты»
Сложный и яркий компонент карты для социальных сетей с микровзаимодействиями, адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
Компонент «Карты»
Компонент адаптивных карт со стилем неуморфизма, поддержкой темной темы и изображениями-заполнителями.