Prompt it

Create a practical curated-resource panel using semantic HTML and complete dependency-free vanilla CSS. Use a section with a visible heading and concise introduction. Include a labelled navigation landmark containing a semantic unordered list of resource cards. Each card should have a category, a descriptive heading link, a one-sentence explanation, and a visible destination domain. For external links that open a new tab, use target="_blank" with rel="noopener" and tell users visibly that the link opens a new tab. Use reputable CSS and accessibility references, but make it easy for site owners to replace or verify destinations. Scope all custom styles under .cf-resource-panel, and ensure every class selector used in CSS exists in the supplied HTML so live edits affect the preview. Use a three-column layout on wide screens, two columns on medium screens, and one column at 320px; long text must wrap without horizontal scrolling. Maintain readable contrast, clear keyboard-visible :focus-visible outlines, and comfortable link targets. Use system fonts, no scripts, frameworks, remote assets, or animation; disable hover transition under prefers-reduced-motion. Return complete HTML and CSS.