Chalarangelo/30-seconds-of-css ? reverse-engineered prompt

Build me a simple website for a collection of short CSS snippets that people can browse and search through بسهولة. I want a homepage where users can see lots of snippet cards, click into any card to read the full CSS, a short explanation, and an example of what it does. Add a search bar that lets people find snippets by name, tag, language, or description, and make it easy to filter by tags too.

Each snippet should also have a button to open it in Codepen, since that would make it easier to test and play with. Keep the overall feel clean and friendly, like a learning resource for developers who want quick CSS ideas they can copy and use.

Please make it look polished and responsive, and if you need to check current docs or best practices while building it, go ahead and look them up online.