Css – How to arrange NavBar for my following react project?

I’m learning ReactJS along with Tailwind CSS. I’m trying to make my page responsive(I’m a beginner), but now I’m stuck with an issue with my navbar. The problem is, my navbar won’t show up on top of my screen or background.

Explanation:

I’m using tsparticles for my background from https://particles.js.org/. After playing with it a little, I made the tsparticles appear on my project and it is working perfectly fine except for the fact that they often take up the entire screen. I needed to render my navbar component on top of it. But it doesn’t seem to work, I tried z-index properties but it doesn’t seem to work either. I’m new to tailwind css and this is my first project. Can you guys identify why my navbar is not appearing on top. On inspecting I can see that the navbar exists behind the particles.

My navbar code(TopBar.jsx)

import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
import {Fade as Hamburger} from 'hamburger-react';
const TopBar = () => {
  const [isOpen, setOpen] = useState(false)
  return (
    <header className='min-h-16 top-0 text-black w-full font-bold'>
      <div className='flex justify-end items-center p-4 md:hidden'>
        <Hamburger toggled={isOpen} toggle={setOpen} rounded size={'28'}/>
      </div>
      {isOpen && (
        <div className='md:flex  md:justify-end md:text-black pr-9 pt-7'>
          <div className='flex flex-col gap-y-4 items-center md:space-x-12 md:flex-row text-xl'>
          <NavLink to="/about" >About</NavLink>
          <NavLink to="/contact" >Contact</NavLink>
          <NavLink to="/portfolio" >Portfolio</NavLink>
          </div>
        </div>
      )}
        </header>
  )
}

export default TopBar;

Home.jsx code:

import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim";
import TopBar from "./TopBar";

const Home = () => {
  const [init, setInit] = useState(false);

  useEffect(() => {
    initParticlesEngine(async (engine) => {
      await loadSlim(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = (container) => {
    console.log(container);
  };


  const options = useMemo(
    () => ({
      background: {
        color: {
          value: "#005789",
        },
      },
      fpsLimit: 165,
      interactivity: {
        events: {
          onClick: {
            enable: true,
            mode: "push",
          },
          onHover: {
            enable: true,
            mode: "repulse",
          },
        },
        modes: {
          push: {
            quantity: 4,
          },
          repulse: {
            distance: 200,
            duration: 0.4,
          },
        },
      },
      particles: {
        color: {
          value: "#ffffff",
        },
        links: {
          color: "#ffffff",
          distance: 150,
          enable: true,
          opacity: 0.5,
          width: 1,
        },
        collisions: {
          enable: true,
        },
        move: {
          direction: "none",
          enable: true,
          outModes: {
            default: "bounce",
          },
          random: false,
          speed: 1,
          straight: false,
        },
        number: {
          density: {
            enable: true,
            area: 800,
          },
          value: 210,
        },
        opacity: {
          value: 0.5,
        },
        shape: {
          type: "circle",
        },
        size: {
          value: { min: 1, max: 5 },
        },
      },
      detectRetina: true,
    }),
    [],
  );

  return (
    <div>
  <div className="z-10">
    <TopBar/>
  </div>
  
  <div className="z-0">
    <Particles
      id="tsparticles"
      particlesLoaded={particlesLoaded}
      options={options}
    />
  </div>
</div>
  );
};

export default Home;

I would kindly like some help in identifying what I’m doing wrong. Thank You!

Dev-Server : React + Vite