Attempted Implementation of Reusable Components

What are you most proud of, and what would you do differently next time?

This is my first attempt at creating reusable components using React + Tailwind CSS. I am proud of being able to "hack" my way to make the components somewhat reusable.

I would need to look into more resources to create reusable components, especially with Tailwind CSS.

What challenges did you encounter, and how did you overcome them?

So this took longer than usual for various reasons.

I think I have a decent grasp of passing data as props so the actual data that was used for each card component was easy to implement.

However, passing around styling is a totally different story.

For one, this is a really huge component and not a simple button that needs to be styled. I had to hack my way so I can apply styles for each of the different sections of the card component. I am still passing the styles as props on the instance component, so I decided to create an object to pull from for the actual tailwind classes.

The trickiest part is to position these components on the grid! I had to simply pass tailwind classes as props for this, otherwise it would take me forever to figure out. I will look into this further.

What specific areas of your project would you like help with?

Looking for a better way to implement component reusability with React + Tailwind CSS.