FreeInteractive

Link Preview

Use this component inside docs, blogs, changelogs, and resource pages to make important links more informative before users click.

ReactTailwind CSSHoverPreview

Tailwind CSS and Framer Motion are a great way to build modern websites.

Overview

A hoverable anchor treatment that reveals a compact preview card above the link.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<LinkPreview />

Link Preview.tsx

tsx

export function LinkPreview() {
  return (
    <p className="max-w-xl text-sm leading-relaxed text-zinc-400">
      <span className="font-semibold text-white">Tailwind CSS</span> and{" "}
      <span className="group relative font-semibold text-white underline decoration-lime-300/60">
        Framer Motion
        <span className="absolute -top-28 left-1/2 hidden w-52 -translate-x-1/2 rounded-lg border border-white/10 bg-zinc-950 p-3 text-xs shadow-2xl group-hover:block">
          <span className="mb-2 block h-16 rounded-md bg-gradient-to-br from-sky-400 to-lime-300" />
          Preview cards for important links.
        </span>
      </span>{" "}
      are a great way to build modern websites.
    </p>
  );
}