Tile Effect | Faisal Husain

Ok lets create this cool effect

For those who want just the code here it is. ©️ 👨‍💻

const TileEffect = () => {
  const tiles = Array.from({ length: 1599 }, (_, index) => (
    <div
      key={index}
      className="transition-colors border-[1px] border-gray-100/20 relative hover:odd:bg-red-400 hover:[&:nth-child(3n)]:bg-blue-300 hover:[&:nth-child(6n)]:bg-yellow-300 duration-1000 hover:duration-0 hover:bg-green-200"
    ></div>
  ));
  return (
    <div
      className="overflow-hidden flex items-center bg-black justify-center  aspect-video"
      style={{ perspective: "2000px" }}
    >
      <div
        style={{
          transform: "rotateX(50deg) rotateY(-5deg) rotateZ(20deg) scale(1.25)",
        }}
        className="absolute w-[140rem] aspect-square grid grid-rows-[repeat(40,1fr)] grid-cols-[repeat(40,1fr)]"
      >
        <div
          style={{ backgroundSize: "5%" }}
          className="bg-[url('/plus.png')] z-10 absolute inset-0 pointer-events-none"
        ></div>
        <div
          style={{ backgroundSize: "100%" }}
          className="bg-[url('/tile2.png')] z-10 absolute inset-0 pointer-events-none"
        ></div>
        {tiles}
      </div>
    </div>
  );
};
export default TileEffect;

Here you have to add plus png.

Now for those who want to learn the approach

Lets break the problem in 4 simple steps:

Creating tiles which be all over the screen.
Creating hover effect on tile.
Adding image of + on whole tile
Tilting according to your needs

Step 1 : Creating tiles which be all over the screen.

const TileEffect = () => {
  const tiles = Array.from({ length: 1599 }, (_, index) => (
    <div key={index} className="border-[1px] border-gray-100/20 "></div>
  ));
 
  return (
    <div className="overflow-hidden flex items-center bg-black justify-center  aspect-video">
      <div className="absolute w-[140rem] aspect-square grid grid-rows-[repeat(40,1fr)] grid-cols-[repeat(40,1fr)]">
        {tiles}
      </div>
    </div>
  );
};
 
export default TileEffect;

Here we just declared a variable tile with a border and border colors

<div key={index} className="border-[1px] border-gray-100/20 "></div>

After this we just repeat these tile all over the page
Here I have take 40*40 tile screen .You can take any of your choice

Step 1 done

Step 2 : Creating hover effect on tile.

Now we see that I have added hover effect on tile effect.

<div
  key={index}
  className="border-[1px] border-gray-100/20 
hover:bg-red-400"
></div>

But somthing is off if you look in original component then you'll see that on hover color changes instantly ⚡ but when cursor leave then it takes sometime to transform colors.
So whats the solution we will add duration now . Just click on ADD DURATION button.

<div
  key={index}
  className="border-[1px] border-gray-100/20 
hover:bg-red-400 duration-1000  hover:duration-0 transition-colors"
></div>

Now that color sustains in the tile after cursor have left. And now the last part adding random color to the tiles.

<div
  key={index}
  className="border-[1px] border-gray-100/20 
hover:bg-green-200 hover:[&:nth-child(6n)]:bg-yellow-300
 hover:odd:bg-red-400 hover:[&:nth-child(3n)]:bg-blue-300 
 duration-1000  hover:duration-0 transition-colors"
></div>

Step 2 done

Step 3 : Adding image of + on whole tile.

For adding a plus image in the background. First you need to go to canva and add a any icon of you choice in this case it is a plus icon and center it on a 100px*100px page then download it.
Then just add it to the Tiles components as bg and give a background size

const TileEffect = () => {
  const tiles = Array.from({ length: 1599 }, (_, index) => (
    <div
      key={index}
      className="transition-colors border-[1px] border-gray-100/20 relative hover:odd:bg-red-400 hover:[&:nth-child(3n)]:bg-blue-300 hover:[&:nth-child(6n)]:bg-yellow-300 duration-1000 hover:duration-0 hover:bg-green-200"
    ></div>
  ));
  return (
    <div
      className="overflow-hidden flex items-center bg-black justify-center  aspect-video">
      <div className="absolute w-[140rem] aspect-square grid grid-rows-[repeat(40,1fr)] grid-cols-[repeat(40,1fr)]">
        <div
          style={{ backgroundSize: "5%" }}
          className="bg-[url('/plus.png')] z-10 absolute inset-0 pointer-events-none"
        ></div>
        {tiles}
      </div>
    </div>
  );
};
export default TileEffect;

Step 3 done

Step 4 : Tilting according to your needs.

Now just rotate the scene according to your taste.

const TileEffect = () => {
  const tiles = Array.from({ length: 1599 }, (_, index) => (
    <div
      key={index}
      className="transition-colors border-[1px] border-gray-100/20 relative hover:odd:bg-red-400 hover:[&:nth-child(3n)]:bg-blue-300 hover:[&:nth-child(6n)]:bg-yellow-300 duration-1000 hover:duration-0 hover:bg-green-200"
    ></div>
  ));
  return (
    <div
      className="overflow-hidden flex items-center bg-black justify-center  aspect-video"
      style={{ perspective: "2000px" }}
    >
      <div
        style={{
          transform: "rotateX(50deg) rotateY(-5deg) rotateZ(20deg) scale(1.25)",
        }}
        className="absolute w-[140rem] aspect-square grid grid-rows-[repeat(40,1fr)] grid-cols-[repeat(40,1fr)]"
      >
        <div
          style={{ backgroundSize: "5%" }}
          className="bg-[url('/plus.png')] z-10 absolute inset-0 pointer-events-none"
        ></div>
        <div
          style={{ backgroundSize: "100%" }}
          className="bg-[url('/tile2.png')] z-10 absolute inset-0 pointer-events-none"
        ></div>
        {tiles}
      </div>
    </div>
  );
};
export default TileEffect;

This the closest I could have get with tailwind. If you have any suggestion to improve it further feel free to reach me out at faisalhusain1320@gmail.com

Hence completed Thank you for reading 📖 .