Responsive Social Profile Card (Using ReactJS + Vite with TailwindCSS)

Community feedback

• 

  P

  Thomas TS•1,620

  @ttsoares

  Posted 26 days ago

  Neat solution !

  Some comments:

  • Has, the design, a defined font family ? In my browser it been used a default one.

  • It is good practice to specify colors first and then apply them where is needed, to avoid hardcoded like this bg-[#1F1F1F].

  • To improve responsiveness we use REMs or EMs. So, instead of min-h-[450px] this: min-h-[33.75rem] witch is 450/16.

  • This approach of calling the styles from a CSS file is a bit odd for the Tailwind ways.

  button {
    @apply bg-[#333333] rounded-md w-full text-sm p-2 font-semibold hover:bg-[#C5F829] hover:text-black transition-colors duration-300 hover:cursor-pointer;
  }
  

  Instead Tailwind sugget to apply thise classes in the .JSX file:

  <button className="bg-[#333333] rounded-md w-full text-sm p-2 font-semibold hover:bg-[#C5F829] hover:text-black transition-colors duration-300 hover:cursor-pointer">
  Twitter
  </button>
  

  But, in this case that would result in a lot of ugly repetitions. So, React style, you could create a button component:

  const Button = ({ children, url }) => {
    const handleClick = () => {
      if (url) {
        window.open(url, '_blank');
      }
    };
  
    return (
      <button
        onClick={handleClick}
        className="bg-[#333333] rounded-md w-full text-sm p-2 font-semibold hover:bg-[#C5F829] hover:text-black transition-colors duration-300 hover:cursor-pointer text-white"
      >
        {children}
      </button>
    );
  };
  

  01

  Marked as helpful