Fixed component you are looking for is called FixedComponent.tsx, It takes options prop to customize this component and add context.

Option prop allows you to change: context, logo, background color and border color. Also option prop accepts class of items you would love this component to interact with and some useState values.

For this app I used React, Typescript, Tailwind for styling and for some animations I have used Framer Motion. Framer Motion was not used to make any functionality for main component.

App is fully responsive.

type Context = { id: string; title: string; paragraphs: string[]; };

type Options = { overlappedItem: string | null; setOverlappedItem: (item: string | null) => void; logo: string; overlapTargetClass: string; context: Context[]; color?: string; borderColor?: string; };