Skip to content
Submitted over 3 years ago

NFT preview Card component with TailwindCss

tailwind-css, accessibility
Travolgi 🍕•31,300
@denielden
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi community :)

In this challenge I used tailwindcss for the first time.

Tailwind is very convenient but sometimes in the elements that need many classes I find the html too long and confusing.

What do you think about it?

Code

Please log in to post a comment

Log in

Community feedback

  • Rogelio Delgado Montoro•120
    @RogFed

    I tend to avoid CSS Frameworks if possible to be honest, but they have their uses for sure. It is expected to have a bunch of html classes, not much can be done there. Do make use of prettier or some formatting tool to at least have the HTML presented in a way that is easier to read for you while you're coding.

    Have you used any other framweork? MaterialUI, Bootstrap. If so, what's your take on Tailwind vs those other alternatives.

    Keep rocking man, you have some nice solutions in the platform.

    Marked as helpful
  • Web Wizard•5,690
    @rsrclab

    Hi, @denielden ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

    Here are some of the tips I like to provide.

    1. First, answer to your question. Of course, Tailwind is a wonderful one, but as you can see it's too complicated for small tasks like this. So I suggest you to use pure style on this one. On bigger projects, Tailwind will become powerful weapon, but for this project, it's only time wasting.
    2. I hope you to add transition effects on heading and creator name.

    https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

    Cheers ~

    Marked as helpful
  • Grace•32,130
    @grace-snow

    Hi

    Two really strange things on this that I definitely recommend you remove:

    • href="javascript:void(0) should not be on any of these anchor tags. There is no reason to be intercepting the anchor tags with js, just leave as a forward Slash or hash.
    • why are there title attributes on every anchor tag? They shouldn't be there. It's especially confusing for the image link, with all the many alts and titles in there I can't understand whats meant to happen on click via my screenreader (search engine bots would also be confused)

    What is it you expect to happen on click of that image, if this was real? Because it might be more appropriate for that one to be a button, all depends on intended behaviour

  • Aziz Najjar•260
    @Njoura7

    Hello, good job man , almost exactly the same pattern I came here trying to understand how did you make the eye totally visible but I didn't really understand since u used tailwinds and am still stuck in vanilla CSS xD, but I guess you used transition which a very good idea, I ll might try it, but I came across this '-webkit-"property":' and I ve ben searching about it and I didn't understand it well so I was wondering if you could explain it. Thank you

  • muhamad•360
    @noheezybucket

    Woaw nice, Tell me, how did you do to make your site as close as the design ??

  • dumbxguy•10
    @DumbxGuy

    hi @denielden you did a great job..

    can you help me? i am using image tag but its not working...

    can you help me out. :)

    thank you :)

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