back

Back

Dot

black

February 18, 2024

Dot - black Background

How to implement:

With tailwind installed in your project (tutorial), implement these tailwind classes in your parent div where it will reflect the background.

export default function Background() {
  return (
    <div className="flex flex-col items-center h-screen w-full">
      <div className="absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#07000d_1px)] bg-[size:20px_20px]"></div>

      {your page / component}     
    </div>
  );
}

View background:

Captura de tela de 2024-03-18 09-43-37

Mobile and Desktop:

Macbook-Air-localhost (1) (1)

Note

If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.