Componente Mappe
Componente Mappe reattive con supporto per la modalità oscura utilizzando Tailwind CSS.
Codice 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>Componenti correlati
Componente Mappe
Un componente di mappe reattivo progettato in uno stile scheumorfico con una combinazione di colori monocromatica per una dashboard, che supporta la modalità oscura.
Componente Mappe retrò
Un componente di mappe semplice e reattivo con un design retrò/vintage, una combinazione di colori analoga e il supporto per temi scuri, che utilizza Tailwind CSS. Adatto per blog o siti Web di contenuti.
Componente Mappe retrò
Un componente Mappe semplice, reattivo e compatibile con la modalità oscura con un'estetica retrò/vintage, una combinazione di colori vivaci e uno scopo aziendale/aziendale, costruito con Tailwind CSS.