fix: play cards ui

[Akshaygore1]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

#1447
After taking the lead on the issue, I created a new Card component called playCard and passed props to it, resulting in a change in the UI.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

You Can go to /play route and see the changes

Checklist:

• [x
  
  ] I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshots or example output

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	17c445c
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/65d9fdf90cd2aa00084fdb30
😎 Deploy Preview	https://deploy-preview-1461--reactplayio.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[priyankarpal]

also please check this image too @Akshaygore1

[Akshaygore1]

I have updated the request as per your instructions regarding the changes. @priyankarpal

[priyankarpal]

I have updated the request as per your instructions regarding the changes. @priyankarpal

there is a little bit issue just need to left-align the project name

[priyankarpal]

We can use Tailwind CSS instead of writing vanilla CSS

[Akshaygore1]

We can use Tailwind CSS instead of writing vanilla CSS

We could, but I didn't use it because the properties of the icon are not being overridden.

[priyankarpal]

We can use Tailwind CSS instead of writing vanilla CSS

We could, but I didn't use it because the properties of the icon are not being overridden.

ok

[priyankarpal]

Looks Good 🎉

@Akshaygore1 I will suggest to name branches like this format fix-issue-issuenumber

[priyankarpal]

@all-contributors please add @Akshaygore1 as a contributor for code

[allcontributors]

@priyankarpal

I've put up a pull request to add @Akshaygore1! 🎉