Four Card Feature Section with Next.js TypeScript, TailwindCSS

Community feedback

• 

  P

  Ehsan Tatasadi•1,780

  @tatasadiPosted about 2 months ago

  Good job on the implementation, it looks solid overall! Here are a few suggestions to improve the code:

  • Instead of using fixed widths like w-[540px] for your paragraphs or cards, use responsive widths like max-w-[540px] or w-full with padding. This will make the layout more fluid on various screen sizes.
  • Avoid using hardcoded values like w-[350px] and h-[250px] for the card containers. Consider using flex-grow, flex-shrink, or relative sizing units (like percentages or vw/vh) to make the design responsive and flexible.
  • For the mobile view, you could simplify the use of custom media queries like max-[580px]. Consider using Tailwind's built-in breakpoints (sm:, md:, etc.) for consistency and cleaner code.
  • Be mindful of the repetition in card component styling. You could extract the common card structure into a separate component and pass props to keep the code DRY (Don't Repeat Yourself). This will make future maintenance easier.

  Keep up the great work!

  Marked as helpful

  1