Project Management - Copy this React, Tailwind Component to your project

<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"> <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> <p *ngIf="projects.length==0" class="text center mt 8">Projects Not Available</p> <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 class="tooltip" *ngIf="role !== 'ROLE_USER'" (click)="onEditProject($event, project)"> <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 class="tooltip" *ngIf="role !== 'ROLE_USER'" (click)="showDeleteConfirmation($event, project.id)"> <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> <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 dialog btn confirm">Yes</button> <button (click)="cancelDelete()" class="dialog btn dialog btn cancel">No</button> </div> </div> </div> <div *ngIf="showForm"> <app project form [project]="selectedProject"></app project form> </div> this is the given html code where there are callings for the angular . now you write the another html file where it should conatin best ui and ux and all the methods callings should be same as the given html file.