Skip to content
Submitted over 3 years ago

Profile Card Component (Tailwind)

Ben•770
@BenConfig
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Sorry for uploading something that looks incomplete. It is complete, but this is my first time using Tailwind and I've not figured out how to link the CSS. I've been struggling with this for the last 4 - 5 hours so any help would be greatly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Mark Mitchell•1,820
    @markup-mitchell

    I'm sort of astounded by how little structure there is here, in terms of actual elements I mean. It's impressively minimal, but I wonder how someone using, say, a screen reader would understand the content.

    The user name is a heading, but then everything else is just paragraphs. I think it is possible to infer what everything means, just about, but it'd be difficult. (I'm just thinking aloud here, BTW - parsing this design into semantic HTML is tough; I spent ages figuring something out! 🙂)

    Anyway, to answer your question - you said CSS, but I guess you mean SVG? I don't know why the background-images aren't working; changing the filepath from / to ./ didn't work the way I thought it would.

    You could try extending your config if you want to adhere strictly to the utility-first approach, but if I were you I'd just slap style="background-image: url(./images/bg-pattern-card.svg)" straight into <main>.

    Marked as helpful
  • Mark Mitchell•1,820
    @markup-mitchell

    "I think every page must have an h1 element, so the name was the most obvious choice for this."

    Yeah, i think that's right. And i reckon if your card was an <article> nested under <main> then the <h1> would be valid for the component wherever it was used in a page.

    I ended up making "followers", "likes" and "photos" into level 2 headings, but it took me a lot of thought and testing to come to that conclusion.

    I love using tailwind - all the best with it.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord