Skip to content
Submitted about 1 year ago

Four card feature section (Tailwind CSS)

#accessibility#lighthouse#pwa#tailwind-css#semantic-ui
Melvin Aguilar 🧑🏻‍💻•61,120
@MelvinAguilar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

🎁 Features:

  • Progressive Web App (PWA) support. 📱🌐
  • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
  • Utilized TailwindCSS for responsive styling. 🎨
  • Codebase is well-maintained and formatted using Prettier. 💻
  • Resemblance with the original design. 🎨

🛠️ Built With:

  • TailwindCSS. 🎨
  • npm - Prettier. 💻

Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

Thank you. 😊✌️

Community feedback

  • Towkir Ahmed•280
    @towkirPosted about 1 year ago

    Hi Melvin, Hope you're doing well and continuing making pixel perfect designs. The body background color is #FAFAFA and the cards are #FFFFFF. I believe you couldn't get the figma file, or you wouldn't miss that. Cheers.

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted about 1 year ago

    Hi @towkir

    Thank you for pointing out my mistake. I don't have the Figma file for this design, and I mistakenly thought all the colors were white 😅. I appreciate your clarification.

    0
    Towkir Ahmed•280
    @towkirPosted about 1 year ago

    @MelvinAguilar I wouldn't call it a mistake ;) You did the best out there without the figma, I admire your work. Keep it up.

    0
  • ifaronti•630
    @ifarontiPosted about 1 year ago

    I've gone through most of your projects and I'm amazed at your skills expecially with CSS. I find myself going through your CSS to learn a lot of tricks. One of your comments led me to pixel-perfect which has greatly peaked my interest in improving my CSS. Thanks!! Thanks!! Thanks!!

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted about 1 year ago

    Thank you so much for your kind words! @ifaronti

    0
  • Boris•3,000
    @mkborisPosted about 1 year ago

    All your solutions are truly outstanding.

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted about 1 year ago

    @mkboris Thank you! 🌟

    0
  • lx9zi•380
    @lx9ziPosted about 1 year ago

    amazing

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted about 1 year ago

    @lx9zi Thanks so much! 😊

    0
  • Sameh•430
    @SamehCodePosted about 1 year ago

    #wow looks gr8 , ##seems pixel perfect too , ###<3 nice work.

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted about 1 year ago

    @SamehCode Thank you! 🙌 Your kind words mean a lot!

    0
  • Martinsgundi•380
    @MartinsgundiPosted about 1 year ago

    Hey Melvin, nice work as usual.

    Check out your LinkedIn, sent you a connect request about 3 weeks ago. Cheers✌🏾

    0
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted about 1 year ago

    @Martinsgundi Hey there! 🌟 Thanks a bunch for the compliment! 🙌 I'll definitely check my LinkedIn

    1

Please log in to post a comment

Log in with GitHub

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