<Postit>
          {Array.isArray(site.bio) ? (
            <Blocks nodes={site.bio} />
          ) : site.bio ? (
            <p className="text-gray-700">{site.bio}</p>
          ) : null}
</Postit>

// components/Postit.tsx
import type { ReactNode } from "react";

type PostitProps = {
  children: ReactNode; // whatever you pass in (Blocks, <p>, etc.)
  className?: string; // optional extra styles
};

export default function Postit({ children, className }: PostitProps) {
  return (
    <div className={`grid p-4 ${className ?? ""}`}>
      <div className="relative">
        <span className="pointer-events-none absolute -left-2 -top-5 h-10 w-5 rotate-45 bg-blue-100/60"></span>
        <span className="pointer-events-none absolute -right-2 -top-5 h-10 w-5 -rotate-45 bg-blue-100/60"></span>
        <span className="pointer-events-none absolute -left-2 -bottom-5 h-10 w-5 -rotate-45 bg-blue-100/60"></span>
        <span className="pointer-events-none absolute -right-2 -bottom-5 h-10 w-5 rotate-45 bg-blue-100/60"></span>

        <div className="p-4 pl-10 text-black lined-background-container border-yellow-300 border-b-3 border-r-3 hover:border-b-5 hover:border-r-5">
          <div className="p-4">{children}</div>
        </div>
      </div>
    </div>
  );
}

.lined-background-container {
  width: 100%;
  height: full; /* Adjust as needed */
  --grid-size: 20px;                    /* spacing between lines */
  --grid-thickness: 1px;                /* line weight */
  --grid-color: #3ca1ff4b; 
  background-color: #fff0b0;            /* slate-950 */
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--grid-color) 0 calc(var(--grid-thickness)),
      transparent calc(var(--grid-thickness)) var(--grid-size)
    );
  background-size: var(--grid-size) var(--grid-size);
}