Skip to content
Submitted over 2 years ago

Single price grid component (Tailwind CSS)

accessibility, tailwind-css
Melvin Aguilar 🧑🏻‍💻•61,040
@MelvinAguilar
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

🛠️ Built With:

  • TailwindCSS
  • npm - prettier

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. 😊✌️

Code

Please log in to post a comment

Log in

Community feedback

  • jorditosa•120
    @jorditosa

    Hi Melvin,

    Excelent work! Just to say something: For anchor elements, it is good practice target "_blank" attribute.

    Then, for html markup, probably I would split main element to use it only for "join our community" container, and other two being created as section elements...all as the main part of the webpage, not all is the dominant content.

    Finally, probably you have used many arbitrary values...then, could be better developing directly with css or with preprocessor. For example, class p-[1.5625rem], that you repeat often, would be faster to create a variable with that value (:root), and then you do not need to write different times.

    I repeat, that is an excellent work! Is just to give some extra opinion, not best, but mine! keep working

    Marked as helpful
  • Héctor Figuereo•370
    @hector535

    Tus soluciones son muy buenas, precisas como siempre. Excelente trabajo. Yo conservo la esperanza de algún día llegarle a tu nivel. Ya verás que sí.

    Por cierto, quiero que me seas completamente honesto. ¿Es Tailwind tan atractivo como la gente dice? ¿O es puro hype?

  • Ahmed Yasser•460
    @ahmedyasserdev

    i have nothing to say , i am impressed , it's pixel perfect

  • Zsolt Varjú•490
    @zsoltvarju

    Hello Melvin Aguilar!

    I'm absolutely amazed by how perfect this is! I never would've thought it was possible without having access to the Figma files, and I really love it. Congratulations on such a fantastic job! Can I ask how much time it took you to complete?

    Also, in a previous comment, I noticed that you mentioned using the Pixel Perfect extension. I was wondering, what is your approach when using this tool? Do you start by eyeballing the layout and then use the extension to fine-tune it?

    And one more question if you don't mind, do you work as a professional web developer?

    Thank you very much in advance, you really motivated me!

  • RicoRIck12•0
    @RicoRIck12

    Hi, amazing solution i want to know how you make it so accurate if it's not a secret of course!<3

  • Yassine Afaila•540
    @Yassineafaila

    where did you learn Tailwind CSS?? the design looks great, keep going bro

  • Elevate•220
    @i7ector

    nice work! you almost have the design pixel perfect and if you did it just by eyeing then that's very impressive. keep up the good work ;)

  • Aram Nayebbandi•510
    @devaramnye

    Hello,

    I've got one question. Would you prefer everyone to start using tailwindCSS? I am a newbie and I am getting confronted with some things I am not used to like scss and I am working currently on a project to implement my first impression with scss which gives me a lot of work right now. I see your work and I am really impressed and want to get inspired so I hope its fine to ask this question.

  • Azka•480
    @Azkanorouzi

    Hello melvin, great solution congrats on finishing that, I am really surprised by how precisely identical your solutions are to the main design, are you using some kinda app or something to help you get the most accurate size in px? if you do please let me know, and keep it up, your work is really impressive, hope you continue this journey and never give up, good luck.

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