Product preview card

Community feedback

• 

  kvruntime•170

  @kvruntimePosted about 2 months ago

  Great job,

  Your design look closer the suggested one; For more consistency & re-usability of code, you should use css car for colors and use use those var with tailwind.

  /*  index.css */
  
  @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  :root {
  	--dark-cyan: hsl(158, 36%, 37%);
  	--darker-cyan: hsl(158, 36%, 25%);
  	--cream: hsl(30, 38%, 92%);
  	--very-dark-blue: hsl(212, 21%, 14%);
  	--dark-grayish-blue: hsl(228, 12%, 48%);
  	--white: hsl(0, 0%, 100%);
  }
  
  

  <--product-card.tsx-->
  <div className="py-2 px-5 md:p-6">
          <p className="tracking-wider text-[--dark-grayish-blue]">PERFUME</p>
          ...
  </div>
  
  

  See you.

  Marked as helpful

  0