FreeCards

Terminal Card

Use this component for developer tools, setup docs, CLI products, and technical landing pages that need a lightweight terminal preview.

ReactTailwind CSSMotionTerminal

codersarts - bash

$ npx create-next-app@latest

$ installing tailwindcss...

$ building components...

$ ready on localhost:3000

Overview

A compact mac-style terminal card with animated command lines.

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

npm install framer-motion

Usage

tsx

<TerminalCard />

Terminal Card.tsx

tsx

"use client";

import { motion } from "framer-motion";

const lines = [
  "npx create-next-app@latest",
  "installing tailwindcss...",
  "building components...",
  "ready on localhost:3000",
];

export function TerminalCard() {
  return (
    <div className="w-full max-w-md overflow-hidden rounded-lg border border-white/10 bg-zinc-950 text-white shadow-2xl shadow-black/20">
      <div className="flex items-center gap-2 border-b border-white/10 px-3 py-2">
        <span className="h-2.5 w-2.5 rounded-full bg-rose-400" />
        <span className="h-2.5 w-2.5 rounded-full bg-amber-300" />
        <span className="h-2.5 w-2.5 rounded-full bg-lime-300" />
        <span className="ml-3 text-xs text-zinc-500">codersarts - bash</span>
      </div>
      <div className="space-y-2 p-4 font-mono text-xs">
        {lines.map((line, index) => (
          <motion.p
            key={line}
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.15 }}
            className="text-zinc-400"
          >
            <span className="text-lime-300">$</span> {line}
          </motion.p>
        ))}
      </div>
    </div>
  );
}