Industrial_Monochromatic_Tabs_Component_Booking_Reservation
一个简单、响应式的标签组件，具有工业化的单色美感，专为预订和预订系统而设计。它支持深色模式，并使用原材料和外露元素来营造实用吸引力。
HTML 代码
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen flex items-start justify-center">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
<input type="radio" name="tab" id="tab1" class="hidden" checked>
<label for="tab1" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200
text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600
peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
Appointment
</label>
<input type="radio" name="tab" id="tab2" class="hidden">
<label for="tab2" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200
text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600
peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
Reservation
</label>
<input type="radio" name="tab" id="tab3" class="hidden">
<label for="tab3" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none transition-colors duration-200
text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600
peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
History
</label>
</div>
<div class="p-6 sm:p-8">
<!-- Tab Content 1: Appointment -->
<div id="content1" class="tab-content" data-tab="tab1">
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Schedule Your Appointment</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6">Please select a service, date, and time for your appointment. Our team will confirm your booking within 24 hours.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Service Type</label>
<select id="service" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
<option value="">Select a Service</option>
<option value="consultation">Technical Consultation</option>
<option value="maintenance">Equipment Maintenance</option>
<option value="installation">New System Installation</option>
<option value="repair">Emergency Repair</option>
</select>
</div>
<div>
<label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Date</label>
<input type="date" id="date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
</div>
<div>
<label for="time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Time Slot</label>
<input type="time" id="time" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
</div>
<div>
<label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (Optional)</label>
<textarea id="notes" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
</div>
</div>
<button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Book Appointment</button>
</div>
<!-- Tab Content 2: Reservation -->
<div id="content2" class="tab-content hidden" data-tab="tab2">
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Make a Resource Reservation</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6">Reserve our specialized equipment or facilities. Provide details about your project to ensure availability and suitability.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label for="resource" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Resource Type</label>
<select id="resource" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
<option value="">Select a Resource</option>
<option value="lab">Testing Lab Area</option>
<option value="equipment">Heavy Lifting Equipment</option>
<option value="conference">Conference Room 1</option>
<option value="workshop">Large Workshop Space</option>
</select>
</div>
<div>
<label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
<input type="date" id="start-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
</div>
<div>
<label for="end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
<input type="date" id="end-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
</div>
<div>
<label for="project-details" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
<textarea id="project-details" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
</div>
</div>
<button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Submit Reservation</button>
</div>
<!-- Tab Content 3: History -->
<div id="content3" class="tab-content hidden" data-tab="tab3">
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Your Booking History</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6">Review your past appointments and reservations. You can also cancel or reschedule upcoming bookings here.</p>
<div class="space-y-4">
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">Equipment Maintenance</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-10-26, Time: 10:00 AM</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400 font-medium">Confirmed</span></p>
</div>
<div class="mt-3 sm:mt-0 flex space-x-2">
<button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
<button class="px-4 py-2 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Cancel</button>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">Testing Lab Area Reservation</p>
<p class="text-sm text-gray-600 dark:text-gray-300">From: 2023-10-20 to 2023-10-22</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-blue-600 dark:text-blue-400 font-medium">Completed</span></p>
</div>
<div class="mt-3 sm:mt-0 flex space-x-2">
<button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">Emergency Repair Service</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-09-15, Time: 02:30 PM</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-red-600 dark:text-red-400 font-medium">Cancelled</span></p>
</div>
<div class="mt-3 sm:mt-0 flex space-x-2">
<button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* This is a workaround for pure HTML/CSS tab functionality using radio buttons */
/* In a real application, JavaScript would be used for better accessibility and dynamic content */
.tab-content {
display: none;
}
#tab1:checked ~ .flex + .p-6 #content1,
#tab2:checked ~ .flex + .p-6 #content2,
#tab3:checked ~ .flex + .p-6 #content3 {
display: block;
}
/* Styles for the labels to act as interactive tabs */
#tab1:checked + label {
background-color: var(--checked-bg-color-light, #e5e7eb) !important; /* gray-200 */
border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important; /* gray-900 */
color: var(--checked-text-color-light, #1f2937) !important; /* gray-900 */
}
.dark #tab1:checked + label {
background-color: var(--checked-bg-color-dark, #111827) !important; /* gray-900 */
border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important; /* gray-100 */
color: var(--checked-text-color-dark, #f9fafb) !important; /* white */
}
#tab2:checked + label {
background-color: var(--checked-bg-color-light, #e5e7eb) !important;
border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
color: var(--checked-text-color-light, #1f2937) !important;
}
.dark #tab2:checked + label {
background-color: var(--checked-bg-color-dark, #111827) !important;
border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
color: var(--checked-text-color-dark, #f9fafb) !important;
}
#tab3:checked + label {
background-color: var(--checked-bg-color-light, #e5e7eb) !important;
border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
color: var(--checked-text-color-light, #1f2937) !important;
}
.dark #tab3:checked + label {
background-color: var(--checked-bg-color-dark, #111827) !important;
border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
color: var(--checked-text-color-dark, #f9fafb) !important;
}
</style>