Submitted 6 months ago

Four card feature section (Tailwind CSS)

#accessibility#lighthouse#pwa#tailwind-css#semantic-ui

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

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

@towkir

Posted 5 months 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.

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 5 months 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.

Towkir Ahmed• 280

@towkir

Posted 5 months 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.

ifaronti• 530

@ifaronti

Posted 5 months 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!!

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 5 months ago

Thank you so much for your kind words! @ifaronti

Makoge Boris• 650

@mkboris

Posted 6 months ago

All your solutions are truly outstanding.

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 5 months ago

@mkboris Thank you! 🌟

lx9zi• 380

@lx9zi

Posted 6 months ago

amazing

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 6 months ago

@lx9zi Thanks so much! 😊

Sameh• 430

@SamehCode

Posted 6 months ago

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

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 6 months ago

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

Martinsgundi• 300

@Martinsgundi

Posted 6 months ago

Hey Melvin, nice work as usual.

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

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 5 months ago

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

Please log in to post a comment

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