grid-background

export default function Page() {

    return (
        <div className="p-5 bg-black">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-5">

                <>
                    {
                        [
                            "千",
                            "里",
                            "之",
                            "行",
                        ]
                            .map((char) => (
                                    <div className="w-full aspect-square bg-slate-800
                                                    bg-radial-[#d42422_1px,transparent_1px] bg-size-[20px_20px] bg-center"
                                         key={ char }>
                                        <div className="size-full flex justify-center items-center">
                                            <span className="text-9xl font-bold">{ char }</span>
                                        </div>
                                    </div>
                                )
                            )
                    }
                </>


                <>
                    {
                        [
                            "始",
                            "于",
                            "足",
                            "下",
                        ]
                            .map((char) => (
                                    <div className="w-full aspect-square bg-slate-800"
                                         style={ {
                                             backgroundImage: "linear-gradient(to right, #38a3ee 1px, transparent 1px), linear-gradient(#38a3ee 1px, transparent 1px)",
                                             backgroundSize: "40px 40px",
                                             backgroundPosition: "center center",
                                         } }
                                         key={ char }>
                                        <div className="size-full flex justify-center items-center">
                                            <span className="text-9xl font-bold">{ char }</span>
                                        </div>
                                    </div>
                                )
                            )
                    }
                </>

            </div>
        </div>
    )
}