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
Paper_Print_Media_Card
Une carte multimédia simple et réactive avec un design inspiré du papier/de l’impression et une palette de couleurs pastel, avec prise en charge du mode sombre. Idéal pour les plateformes de divertissement ou de médias.
Composants fonctionnels
Une fiche produit e-commerce simple et réactive inspirée de la 3D, avec une palette de couleurs analogue, prenant en charge le mode sombre.
Carte de réservation inspirée du papier/de l’impression
Un composant de carte de réservation/réservation simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs terre, avec prise en charge du mode sombre. Convient pour afficher les créneaux de rendez-vous ou les détails de la réservation.