Neumorphic Site Map Component
A complex, responsive site map component designed in a neumorphic style with jewel tones, suitable for government or public service websites, including dark mode support.
HTML Code
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-emerald-100 to-teal-200 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 font-sans">
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-800 dark:text-emerald-400 mb-12 text-center drop-shadow-lg leading-tight">
<span class="block">Our Services & Resources</span>
<span class="block text-2xl sm:text-3xl text-sapphire-700 dark:text-sapphire-300 font-semibold mt-2">Site Map & Quick Links</span>
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Category 1: Public Services -->
<section class="rounded-3xl p-8 bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
shadow-emerald-300/60 dark:shadow-gray-950/80
hover:shadow-emerald-400/70 dark:hover:shadow-black/70
active:shadow-inner active:shadow-emerald-400/40 dark:active:shadow-gray-700/60
transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
<h2 class="text-3xl font-bold mb-6 text-emerald-800 dark:text-emerald-400 border-b-2 border-emerald-400/50 dark:border-emerald-700/50 pb-4 flex items-center">
<svg class="w-8 h-8 mr-3 text-emerald-600 dark:text-emerald-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6.5 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM12.5 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM7 14.5a3 3 0 016 0H7z" clip-rule="evenodd"></path>
</svg>
Public Services
</h2>
<nav aria-label="Public Services Links">
<ul class="space-y-4">
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
<span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
</span>
Apply for Permits & Licenses
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
<span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
</span>
Report an Issue
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
<span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.555 17.555A.75.75 0 0117 18H3a1 1 0 00-1 1v1h16v-1a1 1 0 00-1-1h-.555zM15 9a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</span>
Resident Services & Benefits
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
<span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
</span>
Pay Bills & Fines Online
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
<span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a1 1 0 100-2 1 1 0 000 2zM12 9a1 1 0 100-2 1 1 0 000 2zM11 11a1 1 0 100-2 1 1 0 000 2zM7 11a1 1 0 100-2 1 1 0 000 2zM12.95 18H7.05a2.05 2.05 0 01-1.88-2.95l.59-.97a1 1 0 00-.73-1.63H4c-.75 0-1.4.52-1.7.35a.5.5 0 00-.3 0h-.3a.5.5 0 00-.4 0c-.3-.22-.7 0-1 0a.5.5 0 00-.4.35C.65 12.33.65 11.2 1 10c.32-.4.8-1.5 1.5-.75-.24.3-.78 1.1-1.3 1.6-.2.18-.3.4-.3.6a.5.5 0 00.1.35c.2.2.4.2.6.2.2 0 .4-.2.6-.2a.5.5 0 00.35-.1.5.5 0 00.35-.1a.5.5 0 00.3-.1a.5.5 0 00.3-.1c.2-.05.4-.1.6-.1.2 0 .4 0 .6.05.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1c.15-.02.4-.02.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.45.05.65.05.2-.02.4-.02.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02c.22-.02.4-.05.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05a2 2 0 00-1.89-2.95l-.59-.97a1 1 0 01.73-1.63H16c.75 0 1.4.52 1.7.35a.5.5 0 00.3 0h.3a.5.5 0 00.4 0c.3-.22.7 0 1 0a.5.5 0 00.4.35c.35.7.35 1.83 0 3.03-.32.4-.8 1.5-1.5.75.24-.3.78-1.1 1.3-1.6.2-.18.3-.4.3-.6a.5.5 0 00-.1-.35c-.2-.2-.4-.2-.6-.2-.2 0-.4.2-.6.2a.5.5 0 00-.35.1.5.5 0 00-.35.1a.5.5 0 00-.3.1a.5.5 0 00-.3.1c-.2.05-.4.1-.6.1-.2 0-.4 0-.6-.05z" clip-rule="evenodd"></path></svg>
</span>
Public Safety Information
</a>
</li>
</ul>
</nav>
</section>
<!-- Category 2: Government & Administration -->
<section class="rounded-3xl p-8 bg-gradient-to-br from-sapphire-50 via-sapphire-100 to-sapphire-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
shadow-sapphire-300/60 dark:shadow-gray-950/80
hover:shadow-sapphire-400/70 dark:hover:shadow-black/70
active:shadow-inner active:shadow-sapphire-400/40 dark:active:shadow-gray-700/60
transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
<h2 class="text-3xl font-bold mb-6 text-sapphire-800 dark:text-sapphire-400 border-b-2 border-sapphire-400/50 dark:border-sapphire-700/50 pb-4 flex items-center">
<svg class="w-8 h-8 mr-3 text-sapphire-600 dark:text-sapphire-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm11.5 5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM10 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg>
Government & Administration
</h2>
<nav aria-label="Government & Administration Links">
<ul class="space-y-4">
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
<span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 002-2v-4a2 2 0 00-2-2H4zm.5 10c0 1.1-.9 2-2 2H2v2h2.5c1.38 0 2.5-1.12 2.5-2.5V14h-2.5zM16 14.5a2.5 2.5 0 00-2.5-2.5H14v2.5A2.5 2.5 0 0016.5 17H18v-2h-1.5c-1.1 0-2 .9-2 2z" clip-rule="evenodd"></path></svg>
</span>
Departments & Agencies
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
<span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
</span>
Official Documents & Forms
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
<span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
</span>
City Council & Meetings
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
<span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h2a2 2 0 012 2v5a2 2 0 01-2 2H2a2 2 0 01-2-2V6a2 2 0 012-2h2V3a1 1 0 011-1zm3 11a1 1 0 100 2h4a1 1 0 100-2h-4z" clip-rule="evenodd"></path></svg>
</span>
Elections & Voter Information
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
<span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v3.586l-.707.707A1 1 0 014 11.586V13a2 2 0 002 2h8a2 2 0 002-2v-1.414l-.707-.707A1 1 0 0114 9.586V6a4 4 0 00-4-4zM8 12.586l1.707 1.707A1 1 0 0011.707 13H14a1 1 0 011 1v1a1 1 0 01-1 1H6a1 1 0 01-1-1v-1a1 1 0 011-1h2.293L8 12.586z" clip-rule="evenodd"></path></svg>
</span>
Careers & Job Opportunities
</a>
</li>
</ul>
</nav>
</section>
<!-- Category 3: Community & Culture -->
<section class="rounded-3xl p-8 bg-gradient-to-br from-ruby-50 via-ruby-100 to-ruby-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
shadow-ruby-300/60 dark:shadow-gray-950/80
hover:shadow-ruby-400/70 dark:hover:shadow-black/70
active:shadow-inner active:shadow-ruby-400/40 dark:active:shadow-gray-700/60
transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
<h2 class="text-3xl font-bold mb-6 text-ruby-800 dark:text-rose-400 border-b-2 border-ruby-400/50 dark:border-ruby-700/50 pb-4 flex items-center">
<svg class="w-8 h-8 mr-3 text-ruby-600 dark:text-rose-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M19.969 8.784L1.031 3.551A.75.75 0 000 4.24v9.52c0 .65.756 1.002 1.309.689l18.938-5.233a.75.75 0 00.722-.685V9.467a.75.75 0 00-.731-.683zM3.486 9.387l15.026 4.148L3.486 16.53z" clip-rule="evenodd"></path>
</svg>
Community & Culture
</h2>
<nav aria-label="Community & Culture Links">
<ul class="space-y-4">
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
<span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 100 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</span>
Parks & Recreation
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
<span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
</span>
Libraries & Museums
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
<span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zm-5 7H7v2a3 3 0 013 3h0a3 3 0 013-3V9h2V7a3 3 0 00-3-3H7a3 3 0 00-3 3v2z"></path></svg>
</span>
Events & Calendar
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
<span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6z"></path></svg>
</span>
Community Programs
</a>
</li>
<li class="hover:scale-102 transition-transform duration-200">
<a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
<span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
<img class="w-5 h-5 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Community Leader">
</span>
Volunteer Opportunities
</a>
</li>
</ul>
</nav>
</section>
</div>
<!-- Contact and Feedback Section -->
<section class="mt-12 rounded-3xl p-8 bg-gradient-to-br from-indigo-50 via-indigo-100 to-indigo-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
shadow-indigo-300/60 dark:shadow-gray-950/80
hover:shadow-indigo-400/70 dark:hover:shadow-black/70
active:shadow-inner active:shadow-indigo-400/40 dark:active:shadow-gray-700/60
transition-all duration-300 ease-in-out">
<h2 class="text-3xl font-bold mb-6 text-indigo-800 dark:text-indigo-400 border-b-2 border-indigo-400/50 dark:border-indigo-700/50 pb-4 flex items-center">
<svg class="w-8 h-8 mr-3 text-indigo-600 dark:text-indigo-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2.928 6.78C3.766 6.3 4.819 6 6 6h.001C10.607 6 15 10.428 15 16v.001c-.134 1.181-.72 2.302-1.63 3.212-.553.553-1.226 1.012-1.97 1.34L12 20a1 1 0 01-1 1h-1a1 1 0 01-1-1v-.001a4 4 0 00-.775-1.571c-.744-.756-1.527-1.396-2.618-1.516L5 16h-.001a5.002 5.002 0 01-3.64-1.583C.81 13.914.515 12.8.515 11.5V11a.5.5 0 010-.001C.515 9.77.771 8.583 1.258 7.55zM17 12a1 1 0 10-2 0v-.586l.707-.707a1 1 0 000-1.414L15 8.586V8a1 1 0 10-2 0v.586l-.707-.707a1 1 0 00-1.414 0l-.707.707L10.586 8H10a1 1 0 10-2 0H7.414l-.707.707a1 1 0 000 1.414L7.414 10H8a1 1 0 100 2H7.414l-.707.707a1 1 0 000 1.414L7 14.586V15a1 1 0 102 0v-.586l.707-.707a1 1 0 001.414 0l.707.707L11.414 15H12a1 1 0 102 0h.586l.707-.707a1 1 0 000-1.414L15.414 12H16a1 1 0 100-2H15.414l.707-.707a1 1 0 000-1.414L16.414 8H17a1 1 0 100-2h-.586l-.707-.707a1 1 0 00-1.414 0L14.586 6H14a1 1 0 10-2 0h-1.414l-.707-.707a1 1 0 00-1.414 0L8.586 6H8a1 1 0 10-2 0H5.414l-.707-.707a1 1 0 00-1.414 0L3.414 6H3a1 1 0 100 2h.586l.707.707a1 1 0 000 1.414L4.586 10H5a1 1 0 100 2H4.586l-.707.707a1 1 0 000 1.414L4 14.586V15a1 1 0 100 2H3.414l-.707-.707a1 1 0 00-1.414 0L1.414 16H1a1 1 0 100 2h.586l.707.707a1 1 0 000 1.414L2.414 18H3a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L4.586 18H5a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L6.414 18H7a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L8.414 18H9a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L10.586 18H11a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L12.414 18H13a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L14.414 18H15a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L16.414 18H17a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L18.414 18H19a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L20.414 18H21a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L22.414 18H23a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L24.414 18H25a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L26.414 18H27a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L28.414 18H29a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L30.414 18H31a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L32.414 18H33a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L34.414 18H35a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L36.414 18H37a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L38.414 18H39a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L40.414 18H41a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L42.414 18H43a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L44.414 18H45a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L46.414 18H47a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L48.414 18H49a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L50.414 18H51a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L52.414 18H53a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L54.414 18H55a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L56.414 18H57a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L58.414 18H59a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L60.414 18H61a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L62.414 18H63a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L64.414 18H65a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L66.414 18H67a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L68.414 18H69a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L70.414 18H71a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L72.414 18H73a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L74.414 18H75a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L76.414 18H77a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L78.414 18H79a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L80.414 18H81a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L82.414 18H83a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L84.414 18H85a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L86.414 18H87a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L88.414 18H89a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L90.414 18H91a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L92.414 18H93a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L94.414 18H95a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L96.414 18H97a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L98.414 18H99a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L100.414 18H101a1 1 0 100 2h-.586l-.707.707a1 1 0 000 1.414L100.414 20H99a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L98.414 16H97a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L96.414 14H95a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L94.414 12H93a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L92.414 10H91a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L90.414 8H89a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L88.414 6H87a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L86.414 4H85a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L84.414 2H83a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L82.414 2H81a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L80.414 2H79a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L78.414 2H77a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L76.414 2H75a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L74.414 2H73a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L72.414 2H71a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L70.414 2H69a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L68.414 2H67a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L66.414 2H65a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L64.414 2H63a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L62.414 2H61a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L60.414 2H59a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L58.414 2H57a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L56.414 2H55a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L54.414 2H53a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L52.414 2H51a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L50.414 2H49a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L48.414 2H47a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L46.414 2H45a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L44.414 2H43a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L42.414 2H41a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L40.414 2H39a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L38.414 2H37a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L36.414 2H35a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L34.414 2H33a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L32.414 2H31a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L30.414 2H29a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L28.414 2H27a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L26.414 2H25a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L24.414 2H23a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L22.414 2H21a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L20.414 2H19a1 1 0 100 2h-.586l.707-.707a1 1 0 000-1.414L18.414 2H17a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L16.414 2H15a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L14.414 2H13a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L12.414 2H11a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L10.414 2H9a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L8.414 2H7a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L6.414 2H5a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L4.414 2H3a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L2.414 2H3a1 1 0 100 2h-.586l-.707-.707a1 1 0 00-.707-.707A.5.5 0 002 2z" clip-rule="evenodd"></path></svg>
Connect With Us
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
<h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">General Inquiries</h3>
<p class="text-gray-700 dark:text-gray-300 mb-2">Email: <a href="mailto:[email protected]" class="text-indigo-600 dark:text-indigo-400 hover:underline">[email protected]</a></p>
<p class="text-gray-700 dark:text-gray-300">Phone: <a href="tel:+15551234567" class="text-indigo-600 dark:text-indigo-400 hover:underline">(555) 123-4567</a></p>
</div>
<div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
<h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">Office Hours</h3>
<p class="text-gray-700 dark:text-gray-300">Monday - Friday: 9:00 AM - 5:00 PM</p>
<p class="text-gray-700 dark:text-gray-300">Saturday - Sunday: Closed</p>
</div>
<div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
<h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">Visit Our Office</h3>
<p class="text-gray-700 dark:text-gray-300">123 Main Street, Anytown, ST 12345</p>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline mt-2 inline-block">Get Directions</a>
</div>
</div>
<form class="grid grid-cols-1 md:grid-cols-2 gap-6 rounded-2xl p-6 bg-indigo-100/50 dark:bg-gray-800/70 shadow-inner dark:shadow-lg">
<div class="md:col-span-2">
<h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-4">Send Us Feedback</h3>
</div>
<div>
<label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Name:</label>
<input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
transition-shadow duration-200" placeholder="John Doe">
</div>
<div>
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Email:</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
transition-shadow duration-200" placeholder="[email protected]">
</div>
<div class="md:col-span-2">
<label for="message" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Message:</label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
transition-shadow duration-200" placeholder="Type your message here..."></textarea>
</div>
<div class="md:col-span-2 text-center">
<button type="submit" class="inline-flex items-center px-8 py-3 rounded-xl text-lg font-bold
bg-emerald-600 text-white dark:bg-sapphire-600 dark:text-white
shadow-lg shadow-emerald-400/60 dark:shadow-sapphire-900/60
hover:bg-emerald-700 dark:hover:bg-sapphire-700
hover:scale-105 active:scale-95 active:shadow-inner active:shadow-emerald-700/40 dark:active:shadow-sapphire-900/40
transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-sapphire-800">
<svg class="w-6 h-6 mr-3 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l.649-.186.931-2.022 1.347.865a1 1 0 001.455-.008l4.475-4.475 2.022-.931.186-.649a1 1 0 00-1.409-1.169l-14-7z"></path></svg>
Send Message
</button>
</div>
</form>
</section>
<!-- Placeholder for related content / images -->
<section class="mt-12 text-center">
<h2 class="text-3xl font-bold text-sapphire-800 dark:text-sapphire-400 mb-6">Related Information</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
shadow-sapphire-200/50 dark:shadow-gray-950/70
hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<img src="https://picsum.photos/id/600/300/200" alt="Placeholder image for city hall" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">City Hall Directory</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Find contact information for all city departments.</p>
<a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More →</a>
</div>
</div>
<div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
shadow-sapphire-200/50 dark:shadow-gray-950/70
hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<img src="https://picsum.photos/id/400/300/200" alt="Placeholder image for local park" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Local Park Initiatives</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Discover new projects planned for our community parks.</p>
<a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More →</a>
</div>
</div>
<div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
shadow-sapphire-200/50 dark:shadow-gray-950/70
hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<img src="https://picsum.photos/id/200/300/200" alt="Placeholder image for library" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Library Services Update</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Explore digital resources and upcoming library events.</p>
<a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More →</a>
</div>
</div>
<div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
shadow-sapphire-200/50 dark:shadow-gray-950/70
hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<img src="https://picsum.photos/id/100/300/200" alt="Placeholder image for community event" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Upcoming Public Events</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Check out the calendar for local gatherings and festivals.</p>
<a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More →</a>
</div>
</div>
</div>
</section>
</div>
<!-- Dark mode toggle - For demonstration, can be a button elsewhere -->
<div class="mt-12 text-center">
<button onclick="document.documentElement.classList.toggle('dark')" class="px-6 py-2 rounded-full
bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200
shadow-md dark:shadow-xl
hover:shadow-lg dark:hover:shadow-black
active:shadow-inner dark:active:shadow-gray-700
transition-all duration-300 ease-in-out font-medium">
Toggle Dark Mode
</button>
</div>
<style>
/* Custom colors for Jewel Tones (adjust as needed for specific shades) */
.text-emerald-800 { color: #047857; } /* green-700 */
.dark .text-emerald-400 { color: #34d399; } /* green-400 */
.border-emerald-400\/50 { border-color: rgba(74, 222, 128, 0.5); } /* green-400 with opacity */
.dark .border-emerald-700\/50 { border-color: rgba(4 120 87, 0.5); } /* green-700 with opacity */
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-200 { background-color: #a7f3d0; }
.bg-emerald-300\/40 { background-color: rgba(110, 231, 183, 0.4); } /* green-300 with opacity */
.group-hover\:bg-emerald-400\/60:hover { background-color: rgba(74, 222, 128, 0.6); }
.text-emerald-700 { color: #047857; /* green-700 */ }
.dark .text-emerald-300 { color: #6ee7b7; }
.shadow-emerald-300\/60 { box-shadow: 0 10px 15px -3px rgba(110, 231, 183, 0.6), 0 4px 6px -2px rgba(110, 231, 183, 0.6); }
.hover\:shadow-emerald-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(74, 222, 128, 0.7), 0 4px 6px -2px rgba(74, 222, 128, 0.7); }
.active\:shadow-inner\.shadow-emerald-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(74, 222, 128, 0.4); }
.bg-emerald-600 { background-color: #059669; } /* green-600 */
.shadow-emerald-400\/60 { box-shadow: 0 10px 15px -3px rgba(74, 222, 128, 0.6), 0 4px 6px -2px rgba(74, 222, 128, 0.6); }
.hover\:bg-emerald-700:hover { background-color: #047857; }
.active\:shadow-inner\.shadow-emerald-700\/40:active { box-shadow: inset 0 2px 4px 0 rgba(4, 120, 87, 0.4); }
.focus\:ring-emerald-300:focus { --tw-ring-color: #a7f3d0 !important; }
.text-sapphire-700 { color: #1d4ed8; } /* blue-700 */
.dark .text-sapphire-300 { color: #93c5fd; } /* blue-300 */
.text-sapphire-800 { color: #1e40af; } /* blue-800 */
.dark .text-sapphire-400 { color: #60a5fa; } /* blue-400 */
.border-sapphire-400\/50 { border-color: rgba(96, 165, 250, 0.5); }
.dark .border-sapphire-700\/50 { border-color: rgba(29, 78, 216, 0.5); }
.bg-sapphire-50 { background-color: #eff6ff; }
.bg-sapphire-100 { background-color: #dbeafe; }
.bg-sapphire-200 { background-color: #bfdbfe; }
.bg-sapphire-300\/40 { background-color: rgba(147, 197, 253, 0.4); }
.group-hover\:bg-sapphire-400\/60:hover { background-color: rgba(96, 165, 250, 0.6); }
.shadow-sapphire-300\/60 { box-shadow: 0 10px 15px -3px rgba(147, 197, 253, 0.6), 0 4px 6px -2px rgba(147, 197, 253, 0.6); }
.hover\:shadow-sapphire-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.7), 0 4px 6px -2px rgba(96, 165, 250, 0.7); }
.active\:shadow-inner\.shadow-sapphire-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(96, 165, 250, 0.4); }
.bg-sapphire-600 { background-color: #2563eb; }
.shadow-sapphire-900\/60 { box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.6), 0 4px 6px -2px rgba(17, 24, 39, 0.6); }
.hover\:bg-sapphire-700:hover { background-color: #1d4ed8; }
.active\:shadow-inner\.shadow-sapphire-900\/40:active { box-shadow: inset 0 2px 4px 0 rgba(17, 24, 39, 0.4); }
.focus\:ring-sapphire-800:focus { --tw-ring-color: #1e40af !important; }
.focus\:ring-sapphire-500\/70:focus { --tw-ring-color: rgba(59, 130, 246, 0.7) !important; }
.text-ruby-700 { color: #be123c; } /* rose-700 */
.dark .text-rose-300 { color: #fda4af; } /* rose-300 */
.text-ruby-800 { color: #9f1239; } /* rose-800 */
.dark .text-rose-400 { color: #fb7185; } /* rose-400 */
.border-ruby-400\/50 { border-color: rgba(251, 113, 133, 0.5); }
.dark .border-ruby-700\/50 { border-color: rgba(190, 18, 60, 0.5); }
.bg-ruby-50 { background-color: #fff1f2; }
.bg-ruby-100 { background-color: #ffe4e6; }
.bg-ruby-200 { background-color: #fecdd3; }
.bg-ruby-300\/40 { background-color: rgba(253, 164, 175, 0.4); }
.group-hover\:bg-ruby-400\/60:hover { background-color: rgba(251, 113, 133, 0.6); }
.shadow-ruby-300\/60 { box-shadow: 0 10px 15px -3px rgba(253, 164, 175, 0.6), 0 4px 6px -2px rgba(253, 164, 175, 0.6); }
.hover\:shadow-ruby-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(251, 113, 133, 0.7), 0 4px 6px -2px rgba(251, 113, 133, 0.7); }
.active\:shadow-inner\.shadow-ruby-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(251, 113, 133, 0.4); }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100\/50 { background-color: rgba(224, 231, 255, 0.5); }
.bg-indigo-200\/50 { background-color: rgba(199,210,254, 0.5); }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-indigo-800 { color: #3730a3; }
.dark .text-indigo-300 { color: #a5b4fc; }
.dark .text-indigo-400 { color: #818cf8; }
.shadow-indigo-300\/60 { box-shadow: 0 10px 15px -3px rgba(165, 180, 252, 0.6), 0 4px 6px -2px rgba(165, 180, 252, 0.6); }
.hover\:shadow-indigo-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(129, 140, 248, 0.7), 0 4px 6px -2px rgba(129, 140, 248, 0.7); }
.active\:shadow-inner\.shadow-indigo-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(129, 140, 248, 0.4); }
/* General neumorphism shadows */
.shadow-xl {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
}
.dark .shadow-xl {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4), -10px -10px 20px rgba(255, 255, 255, 0.05);
}
.shadow-md {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.07), -5px -5px 10px rgba(255, 255, 255, 0.5);
}
.dark .shadow-md {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.03);
}
.shadow-inner {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.05), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
}
.dark .shadow-inner {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.03);
}
/* Hover and Active states for neumorphism */
.hover\:shadow-lg:hover {
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.12), -8px -8px 16px rgba(255, 255, 255, 0.75);
}
.dark .hover\:shadow-black:hover {
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -8px -8px 16px rgba(0, 0, 0, 0.1);
}
.active\:shadow-inner:active {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px rgba(255, 255, 255, 0.6);
}
.dark .active\:shadow-gray-700:active {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(255, 255, 255, 0.06);
}
/* Specific custom shadows for inputs for a deeper inner effect */
.shadow-inner\.shadow-emerald-200\/70 {
box-shadow: inset 5px 5px 10px rgba(220, 252, 231, 0.7), inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}
.dark .shadow-inner\.shadow-gray-900\/60 {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6), inset -5px -5px 10px rgba(255, 255, 255, 0.07);
}
</style>
</div>Related Components
Site Map Component
A simple, responsive sitemap component for Technology/SaaS applications with a dark mode UI and a rainbow gradient accent. Optimized for minimal elements and clear navigation.
Site Map Component
A retro/vintage style site map component featuring responsive effects and dark theme support.
Site Map Component
A simple, responsive site map component with a paper/print-inspired design and an analogous color scheme, suitable for manufacturing/industrial websites, including dark mode support.