FreePricing

Pricing Pulse Card

Use this to highlight a recommended plan, limited offer, or starter package in a pricing section.

ReactTailwind CSSMotionPricing

Starter

$99

Perfect for small components and quick UI fixes.

Overview

A pricing card with a subtle animated border pulse and primary action.

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

<PricingPulseCard />

Pricing Pulse Card.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function PricingPulseCard() {
  return (
    <div className="relative w-full max-w-sm rounded-xl border border-lime-300/30 bg-zinc-950 p-5 text-white">
      <motion.div
        animate={{ opacity: [0.2, 0.45, 0.2], scale: [1, 1.04, 1] }}
        transition={{ duration: 2, repeat: Infinity }}
        className="absolute inset-0 rounded-xl border border-lime-300/30"
      />
      <div className="relative">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-lime-300">
          Starter
        </p>
        <p className="mt-3 text-4xl font-black">$99</p>
        <p className="mt-2 text-sm text-zinc-400">
          Perfect for small components and quick UI fixes.
        </p>
        <button className="mt-5 w-full rounded-lg bg-lime-300 px-4 py-2 text-sm font-bold text-zinc-950">
          Choose plan
        </button>
      </div>
    </div>
  );
}