Project Management Dashboard - Copy this Html, Tailwind Component to your project

Project Management UI/UX Design Prompt We need to design a visually appealing and user friendly interface for a project management application. The application will display a list of projects, allow users to add new projects, edit existing ones, and delete projects. Below are the requirements: Requirements: Header: Title: "Projects" Styling: Large, bold font with a subtle color that stands out. Project List Display: Display projects in a grid layout. Each project should be displayed as a card. Cards should have a shadow effect to make them look elevated. Add Project: An interactive card that allows users to add a new project. Include an icon (e.g., plus sign) to represent adding a project. Hover effect to slightly enlarge the card. Project Cards: Each card should display the project name prominently. Project description should be shown in a lighter, smaller font. Include two buttons on each card for editing and deleting projects. Use tooltips for these buttons to indicate their functions. Cards should have a hover effect to indicate they are clickable. Empty State: A message indicating no projects are available when the project list is empty. Delete Confirmation Dialog: A modal dialog asking the user to confirm the deletion of a project. Two buttons: "Yes" to confirm and "No" to cancel. Project Form Modal: A form for adding and editing projects. The form should appear in a modal window to keep the user focused. Methods to be Called from HTML: onAddProject(): Triggered when the "Add Project" card is clicked. fetchModule(project.id): Fetches the module associated with the clicked project. onEditProject($event, project): Triggered when the "Update" button is clicked. showDeleteConfirmation($event, project.id): Shows the delete confirmation dialog for the clicked project. confirmDelete(): Confirms the deletion of the selected project. cancelDelete(): Cancels the delete operation. Example HTML Structure html <h1 class="text gray 800 text 2xl font bold px 4 py 2">Projects</h1> <div class="grid grid cols 1 sm:grid cols 2 md:grid cols 3 gap 12 px 8 min h screen"> <! Add Project Card > <a *ngIf="role !== 'ROLE_USER'" (click)="onAddProject()" class="hover:scale 105 transform transition"> <div class="card relative flex flex col my 6 bg white shadow lg border border gray 200 rounded lg p 6 hover:shadow xl h 48"> <div class="flex items center justify center h full"> <div class="flex flex col items center justify center text gray 600"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w 12 h 12 mb 4"> <path stroke linecap="round" stroke linejoin="round" stroke width="2" d="M12 4v16m8 8H4"/> </svg> <h6 class="mb 2 text gray 800 text xl font semibold">Add Project</h6> </div> </div> </div> </a> <! No Projects Message > <p *ngIf="projects.length==0" class="text center mt 8 text gray 600">Projects Not Available</p> <! Project Cards > <div *ngFor="let project of projects" class="card h 48 relative flex flex col my 6 bg white shadow lg border border gray 200 rounded lg p 6 hover:shadow xl cursor pointer" (click)="fetchModule(project.id)"> <h6 class="mb 2 text gray 800 text xl font semibold">{{ project.name }}</h6> <p class="text gray 600 leading normal font light flex grow">{{ project.projectDescription }}</p> <div class="flex flex row justify between mt auto space x 4"> <button *ngIf="role !== 'ROLE_USER'" (click)="onEditProject($event, project)" class="tooltip"> <span class="tooltiptext">Update</span> <i class="fas fa pencil alt rounded full bg blue 200 py 2 px 4 border border transparent text xs text blue 700 transition all shadow sm text center font semibold hover:bg blue 300 hover:shadow lg flex items center justify center"></i> </button> <button *ngIf="role !== 'ROLE_USER'" (click)="showDeleteConfirmation($event, project.id)" class="tooltip"> <span class="tooltiptext">Delete</span> <i class="fas fa trash rounded full bg red 200 py 2 px 4 border border transparent text xs text red 700 transition all shadow sm text center font semibold hover:bg red 300 hover:shadow lg flex items center justify center"></i> </button> </div> </div> </div> <! Delete Confirmation Dialog > <div *ngIf="deleteProjectId !== null" class="confirmation dialog"> <div class="dialog content"> <p class="dialog text">Are you sure you want to delete this project?</p> <div class="dialog actions"> <button (click)="confirmDelete()" class="dialog btn confirm">Yes</button> <button (click)="cancelDelete()" class="dialog btn cancel">No</button> </div> </div> </div> <! Project Form Modal > <div *ngIf="showForm"> <app project form [project]="selectedProject"></app project form> </div> Notes: Ensure that the UI is responsive and looks good on different screen sizes. Use appropriate color schemes that are pleasing to the eye and improve readability. The interactive elements should have clear hover and focus states to enhance user experience.