See https://simonwillison.net/2023/May/30/chatgpt-inline-tips/

inline-tips-mockup.html

<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 dark:bg-gray-800">
	<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
		<div class="w-[30px] flex flex-col relative items-end">
			<div class="relative flex">
				<span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px none; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
					<span style="box-sizing: border-box; display: block; width: initial; height: initial; background: none; opacity: 1; border: 0px none; margin: 0px; padding: 0px; max-width: 100%;">
						<img style="display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px none; margin: 0px; padding: 0px;" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20
							xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2730%27%20height=%2730%27/%3e">
						</span>
						<img alt="Warning" decoding="async" data-nimg="intrinsic" class="rounded-sm" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;" src="https://upload.wikimedia.org/wikipedia/commons/1/17/Warning.svg" srcset="https://upload.wikimedia.org/wikipedia/commons/1/17/Warning.svg">
						</span>
					</div>
				</div>
				<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
					<div class="flex flex-grow flex-col gap-3">
						<div style="font-weight: bold" class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">ChatGPT should not be relied on for legal research of this nature, because it is very likely to invent realistic cases that do not actually exist.</div>
					</div>
					<div class="flex justify-between lg:block">
						<div class="text-xs flex items-center justify-center gap-1 self-center pt-2 !invisible">
							<button disabled="" class="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400">
								<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
									<polyline points="15 18 9 12 15 6"></polyline>
								</svg>
							</button>
							<span class="flex-grow flex-shrink-0">1 / 1</span>
							<button disabled="" class="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400">
								<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
									<polyline points="9 18 15 12 9 6"></polyline>
								</svg>
							</button>
						</div>
						<div class="text-gray-400 flex self-end lg:self-center justify-center mt-2 gap-2 md:gap-3 lg:gap-1 lg:absolute lg:top-0 lg:translate-x-full lg:right-0 lg:mt-0 lg:pl-2 visible">
							<button class="p-1 rounded-md hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400">
								<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
									<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
									<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
								</svg>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>