Composants
Composants fonctionnels
Composante gouvernementale monochrome inspirée du papier et de l’impression
Composante gouvernementale monochrome inspirée du papier et de l’impression
Un composant de complexité moyenne imitant le papier physique et les documents imprimés, conçu pour les sites Web du gouvernement et des services publics avec une palette de couleurs monochromatique et une réactivité totale, y compris la prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200">
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-850 transition-colors duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
<!-- Header Section (simulating a document header) -->
<div class="bg-gray-200 p-4 border-b border-gray-300 dark:bg-gray-800 dark:border-gray-700 flex justify-between items-center">
<h1 class="text-xl sm:text-2xl font-bold uppercase tracking-wide text-gray-700 dark:text-gray-300">Official Notice</h1>
<span class="text-sm text-gray-600 dark:text-gray-400">Ref. ID: GVT-01-2023</span>
</div>
<!-- Document Body -->
<div class="p-4 sm:p-6 md:p-8 space-y-6">
<!-- Important Announcement/Title -->
<div class="text-center">
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 border-b-2 border-gray-400 pb-2 inline-block leading-tight">Public Service Announcement</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm italic">Issued: November 15, 2023</p>
</div>
<!-- Main Content Block 1 -->
<section class="space-y-4">
<h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 flex items-center">
<svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
Key Information
</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
This is an urgent public service announcement regarding changes to <strong class="font-bold">local community guidelines for waste management</strong>. Effective immediately, residents are advised to adhere to the revised sorting procedures to ensure efficient recycling and reduce landfill impact.
</p>
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-1 ml-4">
<li>Separate plastics and glass from general waste.</li>
<li>Compost organic materials where facilities are available.</li>
<li>Dispose of hazardous waste at designated collection points only.</li>
</ul>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed italic text-sm">Your cooperation is vital for the sustainability of our community.</p>
</section>
<!-- Interactive Section (e.g., links to resources/forms) -->
<section class="bg-gray-50 dark:bg-gray-800 p-4 rounded-md border border-gray-200 dark:border-gray-700">
<h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
<svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2a1 1 0 100-2h-2z"/><path d="M10 7a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 14.414V17a1 1 0 102 0v-2.586l3.586 3.586a1 1 0 001.414-1.414l-7-7zM2 10a1 1 0 011-1h2a1 1 0 010 2H3a1 1 0 01-1-1zm15-1h-2a1 1 0 100 2h2a1 1 0 100-2zm-7 4a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 18.586V20a1 1 0 102 0v-1.414l3.586 3.586a1 1 0 001.414-1.414l-7-7z"/><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h1a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zM3 8a1 1 0 011-1h12a1 1 0 011 1v5a1 1 0 01-1 1H4a1 1 0 01-1-1V8z" clip-rule="evenodd"></path></svg>
Further Resources
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
<p>Download Full Guidelines <span aria-hidden="true">→</span></p>
</a>
<a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
<p>Locate Your Nearest Recycling Center <span aria-hidden="true">→</span></p>
</a>
</div>
</section>
<!-- Contact Information / Signature Block -->
<footer class="text-right text-sm text-gray-600 dark:text-gray-400 pt-4 border-t border-gray-200 dark:border-gray-700">
<p>Sincerely,</p>
<p class="font-semibold mt-1">Department of Public Wellness</p>
<p>City Hall, 123 Main St, Anytown, State 12345</p>
<p>Contact: <a href="mailto:[email protected]" class="text-gray-700 dark:text-gray-300 underline hover:text-gray-500 dark:hover:text-gray-500 transition-colors">[email protected]</a></p>
</footer>
</div>
</div>
</div>Composants associés
Point culminant de la fonctionnalité de jeu
Une fonctionnalité de jeu réactive met en évidence un composant avec un design épuré et minimaliste mettant l’accent sur la typographie et un système de grille, en utilisant des neutres chauds et en prenant en charge le mode sombre. Comprend une grande image, un titre, une description et un bouton d’action.
Composant fonctionnel du commerce électronique
Composant de commerce électronique de conception plate minimaliste avec palette de couleurs triadique et prise en charge réactive du mode sombre.
Microinteractions_Triadic_Dashboard_Component
Un composant de tableau de bord réactif avec une palette de couleurs triadiques, intégrant des micro-interactions pour l’engagement de l’utilisateur. Comprend des éléments et des commandes de visualisation de données, avec une prise en charge complète du mode sombre.