Help : Custom block component using Qwik , Builder.io

[akshays-repo]

HI i want to create a grid responsive grid element using qwik and Tailwind

responsive-grid-layout.tsx

import { component$, Slot, } from '@builder.io/qwik';
import { Blocks } from '@builder.io/sdk-qwik';


export default component$((props) => {

    return <div>

        <div class='w-full max-w-screen-xl'>

            <div class="grid grid-cols-1 text-white md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4  place-items-center place-content-center">
                {[1, 2, 3, 4].map((i) => <div class='mb-5' key={i}>

                    <Blocks

                    /> 
               </div>
                )}
            </div>
        </div>
    </div>
});

builder-registry.ts

import type { RegisteredComponent } from "@builder.io/sdk-qwik";
import Header from "./core/header/header";
import HeroBanner from "./core/hero-banner/hero-banner";
import ResponsiveGridLayout from "./layout/responsive-grid-layout/responsive-grid-layout";

export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
    {
        component: Header,
        name: 'Header',
      },
      {
        component: ResponsiveGridLayout,
        name: 'ResponsiveGridLayout',
      },
      {
        component: HeroBanner,
        name: 'HeroBanner',
        inputs: [
          {
            name: "subTitle",
            type: "string",
          },
          {
            name: "title",
            type: "string",
          },
          {
            name: "backgroundImageURL",
            type: "string",
          },
        ],
      },

];

my code is incomplete how can I achieve this use case

when i try to place something inside this block its not working for me