User Profile Component - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html> <head> <title>Report</title> <style> body { font family: Arial, sans serif; margin: 0; padding: 0; display: flex; justify content: center; align items: center; height: 100vh; background color: #f4f4f4; } hr { border: none; height: 2px; background color: #ccc; margin: 20px 0; } .container { background color: white; padding: 20px; border radius: 8px; box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max width: 800px; width: 100%; text align: center; } h1 { color: #333; margin bottom: 20px; } p { margin: 10px 0; color: #555; } .course list { list style type: none; padding: 0; margin: 20px 0; } .course list li { margin: 10px 0; padding: 10px; background color: #f9f9f9; border radius: 4px; } .course list li strong { color: #333; } </style> </head> <body> <div class="container"> <hr /> {{#each forms}} <h1>Report for {{name}}</h1> <p><strong>MUJid:</strong> {{mujid}}</p> <p><strong>Email:</strong> {{email}}</p> <p><strong>All Selected Courses:</strong></p> <ul class="course list"> {{#each allSelectedCourses}} <li> <strong>{{@key}}:</strong> Lab Courses: {{this.labCourses}}, Theory Courses: {{this.theoryCourses}} </li> {{/each}} </ul> <p><strong>Is Even:</strong> {{isEven}}</p> {{/each}} <hr /> </div> </body> </html> design a basic template for pdf based on above
