Order-Summary-Component (React and Tailwind)

Community feedback

• 

  Ehsan Tatasadi•1,800

  @tatasadiPosted 12 months ago

  Hey there,

  Good job on your implementation in the Frontend Mentor challenge! Your use of Tailwind CSS for styling demonstrates a good grasp of responsive design principles, and the overall structure of your component looks clean and well-organized.

  I do have a suggestion regarding the layout and spacing in your code. Currently, you're using negative margins (ml-[-1rem]) to adjust the spacing between elements. While this approach can work, it's generally better to avoid negative margins when possible, as they can lead to less predictable layouts and make your CSS harder to maintain. Instead, consider adjusting the gap between elements and using alignment utilities provided by Tailwind CSS.

  Here's a revised version of your code with these suggestions:

  <div className="flex gap-4 bg-[#F5F7FF] p-3 rounded-lg mb-4 md:gap-6 md:px-6">
    <img src="../images/icon-music.svg" />
    <div>
      <h2 className="font-black text-[0.875rem] md:text-[1rem]">
        Annual Plan
      </h2>
      <p className="font-medium text-[0.875rem] md:text-[1rem]">
        $59.99/year
      </p>
    </div>
    <a
      href="#"
      className="font-bold text-[0.8125rem] md:text-[0.875rem] mt-3 ml-auto underline text-[#382AE1]"
    >
      Change
    </a>
  </div>
  

  In this revised version:

  • The negative margin (ml-[-1rem]) is removed. Instead, I adjusted the gap between flex items.
  • The ml-auto on the <a> tag pushes it to the right, aligning it at the end of the flex container. This approach is more predictable and easier to maintain.

  Feel free to adjust the gap if you need more space. These changes should result in a cleaner and more maintainable layout. Keep up the great work, and continue exploring and refining your front-end development skills!

  Marked as helpful

  0