Header - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Damaged Vehicle Check</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="appContainer"> <! Navigation > <header class="header"> <div class="logo"> <h1>Damaged Vehicle Check</h1> </div> <nav> <button id="menuButton">☰</button> <ul id="menu" class="hidden"> <li data page="loginPage">Login</li> <li data page="homePage">Home</li> <li data page="uploadPage">Upload</li> <li data page="adminPage">Admin</li> <li data page="userManagementPage">User Management</li> <li data page="reportingPage">Reporting Tools</li> <li data page="settingsPage">Settings and Preferences</li> <li data page="notificationsPage">Notifications</li> <li data page="helpPage">Help and Support</li> <li data page="bookAppointmentPage">Book Appointment</li> </ul> </nav> </header> <! Login Page > <section id="loginPage" class="page"> <h2>Login</h2> <form id="loginForm"> <label for="username">Username or Email address</label> <input type="text" id="username" placeholder="Enter your Username or Email address" required> <label for="password">Password</label> <input type="password" id="password" placeholder="Enter your password" required> <button type="submit">Login</button> </form> <p>Don't have an account? <button id="openSignUpModal" class="link button">Sign Up</button></p> </section> <! Sign Up Modal > <div id="signUpModal" class="modal hidden"> <div class="modal content"> <span id="closeSignUpModal" class="close">×</span> <h2>Sign Up</h2> <form id="signUpForm"> <label for="signUpUsername">Username</label> <input type="text" id="signUpUsername" placeholder="Enter your username" required> <label for="signUpEmail">Email</label> <input type="email" id="signUpEmail" placeholder="Enter your email address" required> <label for="signUpPassword">Password</label> <input type="password" id="signUpPassword" placeholder="Enter your password" required> <button type="submit">Sign Up</button> </form> </div> </div> <! Home Page > <section id="homePage" class="page hidden"> <h2>Welcome to the Damaged Vehicle Check Home Page!</h2> <h3>Choose a Feature:</h3> <div class="feature list"> <div class="feature item" id="goToUserManagement"> <div class="feature box"> <img src="book appointment.png.jpeg" alt="User Management" class="feature image"> <h4>Book Appointment</h4> </div> </div> <div class="feature item" id="goToReporting"> <div class="feature box"> <img src="View Report.jpeg" alt="Reporting Tools" class="feature image"> <h4>View Report</h4> </div> </div> <div class="feature item" id="goToSettings"> <div class="feature box"> <img src="services.jpeg" alt="Settings and Preferences" class="feature image"> <h4>Services</h4> </div> </div> <div class="feature item" id="goToNotifications"> <div class="feature box"> <img src="View Report.jpeg" alt="Notifications" class="feature image"> <h4>Reviews And Ratings</h4> </div> </div> <div class="feature item" id="goToHelp"> <div class="feature box"> <img src="images.png" alt="Help and Support" class="feature image"> <h4>Help and Support</h4> </div> </div> </div> </section> <! Book Appointment Page > <section id="bookAppointmentPage" class="page hidden"> <h2>Book Your Appointment</h2> <label for="appointmentDate">Select Date:</label> <input type="date" id="appointmentDate" required> <h3>Available Appointment Times</h3> <ul id="appointmentTimes"></ul> <button id="submitAppointment" disabled>Submit Appointment</button> <button id="backToHome">Back to Home</button> <div id="confirmationMessage" class="hidden"></div> </section> <! User Management Page > <section id="userManagementPage" class="page hidden"> <h2>User Management</h2> <form id="userForm"> <label for="userName">User Name:</label> <input type="text" id="userName" placeholder="Enter user name" required> <label for="userEmail">User Email:</label> <input type="email" id="userEmail" placeholder="Enter user email" required> <button type="submit">Add User</button> </form> <h3>Registered Users:</h3> <ul id="userList"> <! User list will be dynamically added > </ul> </section> <! Reporting Tools Page > <section id="reportingPage" class="page hidden"> <h2>Reporting Tools</h2> <p>Generate reports of uploaded images, users, and other activities.</p> <button id="generateReport">Generate Report</button> <div id="reportOutput" class="hidden"> <h3>Report</h3> <p id="reportContent">No data available.</p> </div> </section> <! Settings and Preferences Page > <section id="settingsPage" class="page hidden"> <h2>Settings and Preferences</h2> <form id="settingsForm"> <label for="theme">Select Theme:</label> <select id="theme"> <option value="light">Light</option> <option value="dark">Dark</option> </select> <button type="submit">Save Settings</button> </form> </section> <! Notifications Page > <section id="notificationsPage" class="page hidden"> <h2>Notifications</h2> <button id="addNotification">Add Notification</button> <ul id="notificationList"> <! Notifications will be dynamically added > </ul> </section> <! Help and Support Page > <section id="helpPage" class="page hidden"> <h2>Help and Support</h2> <p>If you have any questions, please contact support@damagedvehiclecheck.com</p> </section> <! Upload Page > <section id="uploadPage" class="page hidden"> <h2>Upload Photo</h2> <form id="uploadForm"> <label for="uploadImage">Upload Image</label> <input type="file" id="uploadImage" accept="image/*" required> <label for="description">Description</label> <textarea id="description" placeholder="Enter description"></textarea> <button type="submit">Submit</button> <button type="button" id="cancelUpload">Cancel</button> </form> </section> <! Admin Page > <section id="adminPage" class="page hidden"> <h2>Admin Panel</h2> <table> <thead> <tr> <th>#</th> <th>Uploaded Image</th> <th>Description</th> <th>Date</th> </tr> </thead> <tbody id="adminEntries"> <! Entries will be dynamically added > </tbody> </table> </section> </div> <footer> <p>© 2025 Damaged Vehicle Check | All Rights Reserved</p> </footer> <script src="script.js"></script> </body> </html>
