Reinitialize Project with Tailwind CSS Instead of Material UI

[shreyaspapi]

Issue Summary:

We currently have a project that uses Material UI for its CSS, but we want to reinitialize the project and switch to Tailwind CSS for styling. As there isn't much custom CSS written, this transition should be relatively straightforward. This issue is to track the process of reinitializing the project with Tailwind CSS.

Steps to Reproduce:

1. Follow the instructions at https://react.dev/learn/start-a-new-react-project to create a new React project.

2. In the newly created React project, remove or uninstall any dependencies related to Material UI or the current CSS framework being used.

3. Install and configure Tailwind CSS for the project. You can refer to the official Tailwind CSS documentation for guidance on installation and setup: https://tailwindcss.com/docs/installation

4. Recreate the project's structure and layout using Tailwind CSS classes to match the existing design as closely as possible.

Expected Result: The project should be successfully reinitialized with Tailwind CSS, and the styling should match the previous Material UI-based styling.

Additional Information: If you encounter any issues or have questions during the process, please feel free to comment on this issue for assistance.

[stevenjburrows]

I can do this if you want to assign me

[shreyaspapi]

Hey thanks, I have assigned the issue @stevenjburrows

[stevenjburrows]

@shreyaspapi do you have any designs as this would be easier that trying to to copy materialui. I have tailwind installed and working.

[shreyaspapi]

@stevenjburrows I have created the basic layout, the colours and icons are not final yet but this would give you an idea - https://www.figma.com/file/K3wuctPqoDW9K5Ms6eT0Eu/Opium-Pay?type=design&node-id=0%3A1&mode=design&t=QUxopnSeosWTpcyu-1

[shreyaspapi]

fixed #3