종이/인쇄에서 영감을 받은 단색 정부 구성 요소

<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">&rarr;</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">&rarr;</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>