Composant Cartes
Composant Responsive Maps avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant de carte de tableau de bord brutaliste
Un composant de carte de tableau de bord de style brutaliste avec des couleurs vives, un contraste élevé, des éléments interactifs complexes, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Cartes
Un composant de cartes réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Cartes
Un composant de cartes réactif conçu avec le style Glassmorphism, avec un thème sombre et des classes CSS Tailwind. Convient aux tableaux de bord avec visualisation des données et panneaux de contrôle.