React, tailwindCSS

Community feedback

• 

  Fer•3,970

  @fernandolapaz

  Posted almost 2 years ago

  Hi 👋🏻, regarding your comment:

  • You could use the mix-blend-mode property that specifies how an element's content should blend with its direct parent background. So, set the soft violet background-color to the image container and then:

  .img-color {
  mix-blend-mode: multiply;
  opacity: 0.75;
  }
  

  And some of this may also interest you:

  • If you want to remove the empty space below the image between 768 and 940px you could do it by giving it a height: 100%. And if the image stretches too much you can add object-fit: cover.
  • To group a set of related items, like the statistics in this case, you could use an unordered list <ul>.
  • It is better to use min-height: 100vh ('h-screen') as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
  • Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the font-size.

  I hope it’s useful, and let me know if it worked : )

  Regards,

  01