How do i place the video inside of the React component? - reactjs

Question

So i have built a react component, and there's supposed to be a video background as a cover, but I just cant seem to make it work.
I just puts the video outside of the component. Can anyone help me with this please. Also I'm using Tailwind.
import React from "react";
export default function Example() {
return (
<div className="items-start flex flex-col p-2 h-96 w-fit ">
<div>
<video autoPlay loop muted>
<source src="Assets/img/video/test.mp4" type="video/mp4" />
</video>
<div className="items-center flex ml-2 mt-2">
<div className="flex-shrink-0 group block">
<div className="flex items-center">
<div>
<img
className="inline-block h-9 w-9 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-white">Sermad Alladin</p>
<p className="text-sm font-medium text-gray-50">
Elgiganten • 18 t.
</p>
</div>
</div>
</div>
</div>
<div className="items-end self-end flex mt-64">
<div className="flex">
<p className="font-normal h-12 leading-5 w-40 mr-2">
Amazing customer service, but i wish was better...😉
</p>
</div>
<div className="items-center flex h-7 justify-end mb-1 p-2 bg-primary rounded-tl-xl rounded-bl-xl">
<div className="font-bold mx-2 text-white">87</div>
</div>
</div>
</div>
</div>
);
}