Face Recognition Attendance - Copy this React, Tailwind Component to your project

Design-a-fully-responsive-webpage-for-a-"Face-Recognition-Attendance-System-with-Geofencing."-The-page-should-provide-users-with-a-seamless-experience-for-checking-their-location-and-marking-attendance,-with-live-camera-integration-for-facial-recognition.-The-interface-must-be-modern,-clean,-and-user-friendly.-Page-Layout-and-Design-Details-1.-Main-Container-Use-a-center-aligned-layout-for-the-content-to-focus-user-attention-on-the-key-functionality.-The-container-should-be-vertically-and-horizontally-centered-on-the-page-for-all-screen-sizes.-Ensure-the-design-scales-elegantly-for-mobile,-tablet,-and-desktop-views.-2.-Title-Section-Display-a-prominent-heading:-"Face-Detection-with-Geofencing-for-Attendance."-Use-a-bold,-sans-serif-font-with-a-size-proportional-to-the-viewport-width.-Align-the-heading-to-the-center.-Add-a-subtle-underline-or-separator-below-the-title-for-emphasis.-3.-Status-Section-Display-real-time-geofencing-status-(e.g.,-"Checking-location..."-or-"You-are-outside-the-allowed-area-for-attendance.")-in-a-dedicated-status-bar-or-notification-box.-Styles-for-the-status-box:-Rounded-corners.-Dynamic-background-color:-Green-for-"Within-allowed-area."-Red-for-"Outside-allowed-area."-Gray-for-"Checking-location..."-Font-weight-should-be-bold-with-clear,-readable-text.-Center-the-status-box-within-the-container.-4.-Live-Camera-Feed-Section-Include-a-section-for-the-live-camera-feed.-Design-details:-Use-a-rounded-rectangle-frame-or-a-card-to-display-the-camera-preview.-Add-a-subtle-shadow-around-the-camera-feed-container-for-depth.-Ensure-the-live-feed-adjusts-responsively-to-screen-sizes-without-distortion.-Add-a-placeholder-text-or-icon-if-the-camera-feed-is-not-available,-styled-with-a-muted-color.-5.-Action-Button-Display-a-call-to-action-button-dynamically:-Button-text:-"Mark-Attendance"-(active)-or-"Check-Location"-(inactive).-Use-a-large,-primary-button-style:-Rounded-edges.-Smooth-hover-effects-(e.g.,-slight-color-change-and-scaling).-Distinct-colors:-Green-for-active-(attendance-can-be-marked).-Gray-for-inactive-(checking-location-or-outside-range).-Center-the-button-below-the-live-feed-section.-6.-Responsiveness-Mobile-View:-Stack-all-elements-in-a-single-column.-Reduce-font-sizes-slightly-while-maintaining-readability.-Ensure-the-button-and-live-feed-container-are-full-width-with-appropriate-padding.-Tablet-View:-Use-a-two-column-layout-if-space-permits-(status-and-live-feed-side-by-side).-Add-more-spacing-between-elements-for-clarity.-Desktop-View:-Ensure-the-layout-remains-centered-with-ample-white-space-around-content.-Elements-should-have-consistent-proportions,-even-on-larger-screens.-7.-Feedback-and-Alerts-Use-toast-notifications-or-pop-up-modals-for-feedback-messages-(e.g.,-"Attendance-marked-successfully!"-or-"You-are-outside-the-allowed-area.").-Notifications-should-appear-at-the-top-or-bottom-of-the-page-and-disappear-after-a-few-seconds.-Smooth-fade-in-and-fade-out-animations-for-alerts.-8.-Color-Palette-Primary-Colors:-Shades-of-blue-for-a-professional-look-(e.g.,-#007BFF,-#0056D2).-Secondary-Colors:-Green-for-success-messages-(#28A745).-Red-for-error-or-warning-messages-(#DC3545).-Light-gray-for-inactive-states-(#D6D6D6).-Background:-A-subtle-gradient-or-a-clean-white-background-with-soft-shadows-for-depth.-9.-Typography-Use-a-modern-sans-serif-font,-such-as-Roboto-or-Inter.-Font-hierarchy:-Heading:-Bold,-2rem-to-3rem-(adjustable-based-on-screen-size).-Subheadings:-Semi-bold,-1.5rem.-Body-text:-Regular,-1rem-to-1.25rem.-10.-Animations-and-Transitions-Smooth-transitions-for-hover-effects-on-the-button-and-status-box.-Subtle-animations-for-the-live-camera-feed-container-when-loaded.-Feedback-notifications-(e.g.,-success-alerts)-should-slide-in-and-fade-out-gracefully.-Final-Note:-Ensure-the-page-prioritizes-accessibility-by-including-clear-text-alternatives,-focus-states,-and-high-contrast-for-readability.-The-layout-should-adapt-seamlessly-to-all-screen-sizes-while-maintaining-functionality-and-visual-appeal.