A
Anonymous

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

Design a modern, functional interface where the "Create New" button is prominently placed at the top of the page. The button should have a subtle, modern color, such as muted blue or gray, with rounded corners and a hover effect that adds a slight shadow or darkens the button. When the user clicks on "Create New," a sleek, centered popup modal should appear with a soft, slightly transparent background overlay to keep the user's focus on the form. The popup modal should have a clean, minimalistic design with a light background, such as soft white or light gray, and a subtle border or shadow to help it stand out. At the top of the modal, include a header reading "Create New Project" in a medium sized, bold font. Inside the modal, arrange the form fields vertically with ample spacing for a clean, modern look. Start with the "Name" field, followed by a "Type" dropdown list, designed with a minimalist style and a clear down arrow icon. Below the dropdown, include an "Upload" field with a button that allows users to browse and select files. Style this button consistently with the "Create New" button but in a slightly lighter shade, and ensure it has an intuitive label like "Upload" or "Choose File." At the bottom of the modal, include a "Create" or "Ok" button in a solid, noticeable color like muted green or blue, with rounded corners and a hover effect. The button should be the most prominent element in the modal, drawing the user’s attention. Next to it, or aligned to the right, include a smaller, text based "Cancel" link or button to close the modal without action. Below the "Create New" button on the main page, design a table like structure to display the user's projects. The table should have column headers labeled "Name," "Type," "Created," and "Actions" (with the Delete button). Use a modern, sans serif font with a slightly darker background color for the headers to differentiate them from the project rows. For each project, display its details in a row under the appropriate columns, with clear, readable text. The "Actions" column should contain a "Delete" button, styled in a subtle but noticeable color like light red or gray, with a trash icon. Add a hover effect to each row, such as a slight darkening or elevation, to create an interactive feel. If there are no projects, display an empty state placeholder within the table. The placeholder should include a modern, minimalist image or icon, such as a folder or a blank document, along with a brief message like "No projects created yet." This placeholder should be centered within the table, maintaining the page’s clean and modern aesthetic. Ensure that the entire page is fully responsive, with the "Create New" button, modal popup, and project table adjusting seamlessly on smaller screens. The design should remain user friendly, visually appealing, and easy to navigate across all devices, with touch friendly elements for mobile users.

Prompt
Component Preview

About

ProjectManagement - Create projects easily with a modal, upload files, and view details in a responsive table. Built with React and Tai. Get free template!

Share

Last updated 1 month ago