Компонент «Карты»
Адаптивный компонент карт с элементами 3D-дизайна и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
<div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
<div class="mt-8 overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
<div class="p-6">
<div class="flex items-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
<div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
</div>
<div class="ml-12">
<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
Explore locations with our interactive 3D map. Discover new places and get directions easily.
</div>
</div>
</div>
<div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
<img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент бруталистских карт
Сложный компонент карты электронной коммерции в бруталистском стиле с монохроматическими цветами и поддержкой темного режима с использованием Tailwind CSS. На нем отображаются места расположения товаров с брутальными элементами дизайна.
Компонент 3D Maps
Адаптивный компонент 3D-карты для бизнес-сайтов с поддержкой темного режима.
Компонент «Карты»
Сложный компонент карт, выполненный в стиле Material Design, подходит для дашбордов. Он объединяет адаптивные элементы, интерактивные функции и поддерживает эстетику темного режима с использованием аналогичной цветовой схемы.