Monospace_Booking_Navigation_Complex_Triadic
A complex booking/reservation navigation component with a monospace/developer aesthetic. It features a triadic color scheme, responsive design, and dark mode support, ideal for appointment systems.
HTML Code
<div class="font-mono min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 flex flex-col">
<!-- Header Navigation -->
<header class="bg-emerald-600 dark:bg-emerald-800 text-white p-4 shadow-lg z-10">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="text-2xl font-bold tracking-tight mb-2 md:mb-0">[BOOK.]_SYSTEM</div>
<nav class="flex flex-wrap justify-center gap-4 text-sm font-medium">
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Dashboard</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Bookings</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Services</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Clients</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Reports</a>
</nav>
<div class="mt-4 md:mt-0 flex items-center gap-4">
<button class="p-2 rounded-full bg-emerald-700 dark:bg-emerald-900 hover:bg-emerald-800 dark:hover:bg-emerald-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white" aria-label="Notifications">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0V6a2 2 0 012-2h2a2 2 0 012 2v5a6.002 6.002 0 014 5.158V14a2 2 0 00-2-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 0"></path></svg>
</button>
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 container mx-auto p-4 md:p-6 lg:p-8 flex flex-col lg:flex-row gap-6">
<!-- Sidebar / Contextual Controls -->
<aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-blue-950 p-6 rounded-lg border-2 border-dashed border-blue-200 dark:border-blue-800 shadow-md">
<h2 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-200 underline">_Filter_Bookings</h2>
<div class="mb-6">
<label for="service-type" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[SERVICE]</label>
<select id="service-type" class="w-full p-2 rounded-md bg-blue-100 dark:bg-blue-900 border border-blue-300 dark:border-blue-700 focus:ring-blue-500 focus:border-blue-500 text-blue-900 dark:text-blue-100 placeholder-blue-400 dark:placeholder-blue-600 outline-none">
<option>All Services</option>
<option>Consultation</option>
<option>Maintenance</option>
<option>Deployment</option>
</select>
</div>
<div class="mb-6">
<label for="date-range" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[DATE_RANGE]</label>
<input type="range" id="date-range" min="0" max="100" value="50" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer dark:bg-blue-700 accent-blue-600">
<div class="flex justify-between text-xs text-blue-600 dark:text-blue-400 mt-1">
<span>Past</span>
<span>Future</span>
</div>
</div>
<div class="mb-6">
<label for="status-filter" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[STATUS]</label>
<div class="flex flex-col gap-2">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded dark:bg-blue-800 dark:border-blue-700 focus:ring-blue-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Pending</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-emerald-600 rounded dark:bg-emerald-800 dark:border-emerald-700 focus:ring-emerald-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Confirmed</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-rose-600 rounded dark:bg-rose-800 dark:border-rose-700 focus:ring-rose-500"><span class="ml-2 text-blue-900 dark:text-blue-100">Cancelled</span>
</label>
</div>
</div>
<button class="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-blue-950 focus:ring-blue-500">_APPLY_FILTERS</button>
</aside>
<!-- Main Content Panel -->
<section class="flex-1 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-700">
<h1 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 flex items-center">
<span class="mr-2 text-emerald-500 dark:text-emerald-400">█</span> UPCOMING_BOOKINGS
</h1>
<!-- Booking List/Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ID]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[CLIENT]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[SERVICE]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[DATE]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[TIME]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[STATUS]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ACTIONS]</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<!-- Booking Row 1 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1A2B3C</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/67.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Alice_Smith</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Consultation_V2</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-28</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:00_AM</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
CONFIRMED
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
<a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
</td>
</tr>
<!-- Booking Row 2 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1D4E5F</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Bob_Johnson</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_System_Setup</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-29</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">02:00_PM</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">
PENDING
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
<a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
</td>
</tr>
<!-- Booking Row 3 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x2F6A7B</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Carol_White</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Debugging_Svc</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-01</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:30_AM</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
CONFIRMED
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
<a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
</td>
</tr>
<!-- Booking Row 4 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x3B8C9D</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">David_King</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Data_Migration</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-05</td>
<td class="px-4 py-4 whitespace-nowrap text-sm flex items-center justify-start text-rose-500 dark:text-rose-400">
CANCELED
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">01:00_PM</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_VIEW</a>
<a href="#" class="text-gray-400 dark:text-gray-600 cursor-not-allowed">_Rebook</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 flex flex-col sm:flex-row justify-between items-center text-sm">
<div class="text-gray-600 dark:text-gray-400 mb-4 sm:mb-0">Showing 1 to 4 of 12 Results</div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors duration-200 z-10">1</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">2</a>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">3</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">...</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">12</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</section>
</main>
<!-- Footer Component -->
<footer class="bg-rose-600 dark:bg-rose-800 text-white p-4 text-center text-sm opacity-90">
<div class="container mx-auto">
© 2024 <span class="font-bold">[BOOK._SYS]</span>. All rights reserved. <span class="text-opacity-70">//_end_of_transmission</span>
</div>
</footer>
</div>Related Components
Playful_Consulting_Navigation_Component
A simple, playful, and cheerful navigation component for consulting/services, featuring rounded elements, a monochrome color scheme with a bright accent, and full responsiveness with dark mode support.
ArtDeco_Neon_Photography_Navigation
A simple, responsive navigation component for photography portfolios, featuring Art Deco-inspired geometric patterns and a vibrant neon/electric color scheme with dark mode support.
Agriculture News Card Navigation
A simple, paper/print-inspired navigation component featuring a news card for agriculture and farming websites, using an analogous color scheme. It's fully responsive with dark mode support.