PricingCard

pricingcard-1779354143283.tsx

'use client';

import React from 'react';

interface Feature {
  name: string;
}

interface PricingCardProps {
  title: string;
  price: string;
  features: Feature[];
  featured?: boolean;
}

const PricingCard: React.FC<PricingCardProps> = ({ title, price, features, featured = false }) => {
  return (
    <div
      className={`transition duration-300 ease-in-out bg-zinc-950 hover:scale-105 hover:shadow-2xl ${
        featured ? 'border-2 border-gold' : ''
      } py-10 px-6 rounded-2xl w-full max-w-sm mx-auto`}
    >
      <h2 className="text-2xl font-bold mb-4">{title}</h2>
      <p className="text-5xl font-bold mb-8">{price}</p>
      <ul>
        {features.map((feature, index) => (
          <li key={index} className="flex items-center mb-4">
            <svg
              className="w-6 h-6 text-gold mr-2"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span className="text-lg">{feature.name}</span>
          </li>
        ))}
      </ul>
      <button
        className={`w-full py-3 px-6 rounded-full ${
          featured ? 'bg-gold text-zinc-950' : 'bg-zinc-800 text-gold'
        } hover:opacity-80 transition duration-300`}
      >
        Choose Plan
      </button>
    </div>
  );
};

const demoFeatures: Feature[] = [
  { name: 'Feature 1' },
  { name: 'Feature 2' },
  { name: 'Feature 3' },
];

export default function () {
  return (
    <div className="flex justify-center items-center h-screen">
      <PricingCard title="Basic" price="$9.99" features={demoFeatures} />
      <PricingCard
        title="Premium"
        price="$19.99"
        features={demoFeatures}
        featured
        className="ml-10"
      />
    </div>
  );
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Animated pricing card with hover effects and feature list

More from Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

import React, { useEffect, useRef, useState } from 'react';

interface TiltCardProps {
  children: React.ReactNode;
}

const TiltCard: React.FC<TiltCardProps> = ({ children }) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const [x, setX] = u

TiltCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards