I have the below react component that uses tailwindcss. On hover over a single icon, both icons are applied mr-4. I want the hover effect to be applied on single hovered icon. thanks

import { FaLinkedin, FaGithub } from "react-icons/fa";

const SocialLinks = () => {
  return (
    <div className="fixed top-50% right-0 flex mt-48">
      <ul>
        <li className="mr-2 hover:mr-4">
          <a
            className="flex items-center justify-center h-10 w-10 rounded-full bg-blue-800 text-white"
            
            href="https://www.linkedin.com/in"
          >
            <FaLinkedin size={16} />
          </a>
        </li>
        <li className="mr-2 hover:mr-4">
          <a
            className="flex items-center justify-center h-10 w-10 rounded-full bg-gray-300 text-gray-800"
            
            href="https://github.com"
          >
            <FaGithub size={16} />
          </a>
        </li>
      </ul>
    </div>
  );
};

export default SocialLinks;

CodePudding user response：

The problem is that your li elements are inside a ul and they are left aligned in there. So when you increase the margin of one of them, the size of the whole ul is increased. And so the other li is also moved since it is positioned relative to the ul.

You can just change the ul to <ul > and it will work as expected.

Demo: https://play.tailwindcss.com/ospQWvG0I1