Компонент «Карты»
Компонент Responsive Maps с поддержкой темного режима с использованием Tailwind CSS.
HTML-код
<div class="bg-gray-900 text-gray-200 p-8 min-h-screen flex flex-col items-center justify-center">
<h2 class="text-2xl font-bold mb-6 text-teal-300">My Location</h2>
<div class="w-full max-w-md rounded-lg shadow-lg overflow-hidden">
<div class="relative" style="padding-bottom: 56.25%;"><!-- 16:9 Aspect Ratio -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1dYOUR_LATITUDE_LONGITUDE!2dYOUR_LONGITUDE!3dYOUR_LATITUDE!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwMDAnMDAuMCJTIDc4wrAwMCcwMC4wIlc!5e0!3m2!1sen!2sus!4vYOUR_GENERATED_ID"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
class="absolute top-0 left-0"
></iframe>
</div>
</div>
<p class="mt-4 text-sm text-gray-400">Replace "YOUR_LATITUDE_LONGITUDE" and "YOUR_LONGITUDE" and "YOUR_LATITUDE" and "YOUR_GENERATED_ID" with your actual map details.</p>
</div>Связанные компоненты
Компонент «Карты»
Сложный компонент карт, выполненный в стиле Material Design, подходит для дашбордов. Он объединяет адаптивные элементы, интерактивные функции и поддерживает эстетику темного режима с использованием аналогичной цветовой схемы.
Компонент «Карты»
Сложный и яркий компонент карты для социальных сетей с микровзаимодействиями, адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
Компонент «Карты»
Адаптивный компонент карт с элементами 3D-дизайна и поддержкой темных тем с использованием Tailwind CSS.