Pricing Card Generator

<div class="pricing-card elevated">
    <div class="pricing-badge">Most Popular</div>
  <div class="pricing-header">
    <h3 class="plan-name">Pro</h3>
    <p class="plan-description">Perfect for growing businesses</p>
  </div>

  <div class="pricing-price">
    <span class="currency">$</span>
    <span class="amount">49</span>
    <span class="period">/month</span>
  </div>

  <ul class="features-list">
      <li class="feature-item">
        <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="feature-text">Unlimited projects</span>
      </li>
      <li class="feature-item">
        <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="feature-text">50GB storage</span>
      </li>
      <li class="feature-item">
        <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="feature-text">Priority support</span>
      </li>
      <li class="feature-item">
        <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="feature-text">Advanced analytics</span>
      </li>
      <li class="feature-item">
        <svg class="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="feature-text">Custom integrations</span>
      </li>
      <li class="feature-item excluded">
        <svg class="feature-icon excluded" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        <span class="feature-text">White-label options</span>
      </li>
  </ul>

  <button class="pricing-button filled">Get Started</button>
    <p class="secondary-text">14-day free trial. No credit card required.</p>
</div>

.pricing-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 32px;
  position: relative;
  max-width: 380px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #3b82f6;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-header {
  text-align: center;
  margin-bottom: 24px;
}

.plan-name {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.plan-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.pricing-price {
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.currency {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

.amount {
  font-size: 56px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.period {
  font-size: 16px;
  color: #6b7280;
}

.original-price {
  font-size: 18px;
  color: #9ca3af;
  text-decoration: line-through;
  margin-left: 8px;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-icon {
  width: 20px;
  height: 20px;
  color: #10b981;
  flex-shrink: 0;
}

.feature-icon.excluded {
  color: #9ca3af;
}

.feature-text {
  font-size: 15px;
  color: #374151;
}

.feature-item.excluded .feature-text {
  color: #9ca3af;
}

.pricing-button {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pricing-button.filled {
  background: #3b82f6;
  color: #ffffff;
  border: none;
}

.pricing-button.filled:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.pricing-button.outlined {
  background: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
}

.pricing-button.outlined:hover {
  background: #3b82f6;
  color: #ffffff;
}

.secondary-text {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  margin: 16px 0 0 0;
}

import React from 'react';

const PricingCard = () => {
  const features = [
  {
    "text": "Unlimited projects",
    "included": true
  },
  {
    "text": "50GB storage",
    "included": true
  },
  {
    "text": "Priority support",
    "included": true
  },
  {
    "text": "Advanced analytics",
    "included": true
  },
  {
    "text": "Custom integrations",
    "included": true
  },
  {
    "text": "White-label options",
    "included": false
  }
];

  return (
    <div style={{
      background: '#ffffff',
      borderRadius: '16px',
      padding: '40px 32px',
      position: 'relative',
      maxWidth: '380px',
      boxShadow: '0 10px 40px rgba(0,0,0,0.1)'
      
    }}>
      {/* Badge */}
      <div style={{
        position: 'absolute',
        top: '-12px',
        left: '50%',
        transform: 'translateX(-50%)',
        background: '#3b82f6',
        color: '#ffffff',
        padding: '6px 16px',
        borderRadius: '20px',
        fontSize: '12px',
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.5px'
      }}>
        Most Popular
      </div>

      {/* Header */}
      <div style={{ textAlign: 'center', marginBottom: '24px' }}>
        <h3 style={{
          fontSize: '24px',
          fontWeight: 700,
          color: '#111827',
          margin: '0 0 8px'
        }}>
          Pro
        </h3>
        <p style={{ fontSize: '14px', color: '#6b7280', margin: 0 }}>
          Perfect for growing businesses
        </p>
      </div>

      {/* Price */}
      <div style={{
        textAlign: 'center',
        marginBottom: '32px',
        display: 'flex',
        alignItems: 'baseline',
        justifyContent: 'center',
        gap: '4px'
      }}>
        <span style={{ fontSize: '24px', fontWeight: 600, color: '#111827' }}>$</span>
        <span style={{ fontSize: '56px', fontWeight: 800, color: '#111827', lineHeight: 1 }}>49</span>
        <span style={{ fontSize: '16px', color: '#6b7280' }}>/month</span>
        
      </div>

      {/* Features */}
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px' }}>
        {features.map((feature, idx) => (
          <li key={idx} style={{
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
            padding: '12px 0',
            borderBottom: idx < features.length - 1 ? '1px solid #e5e7eb' : 'none'
          }}>
            <span style={{ color: feature.included ? '#10b981' : '#9ca3af' }}>
              {feature.included ? '✓' : '✗'}
            </span>
            <span style={{
              fontSize: '15px',
              color: feature.included ? '#374151' : '#9ca3af'
            }}>
              {feature.text}
            </span>
          </li>
        ))}
      </ul>

      {/* Button */}
      <button style={{
        width: '100%',
        padding: '16px 24px',
        fontSize: '16px',
        fontWeight: 600,
        borderRadius: '8px',
        cursor: 'pointer',
        background: '#3b82f6',
        color: '#ffffff',
        border: none
      }}>
        Get Started
      </button>

      <p style={{
        textAlign: 'center',
        fontSize: '12px',
        color: '#9ca3af',
        margin: '16px 0 0'
      }}>
        14-day free trial. No credit card required.
      </p>
    </div>
  );
};

export default PricingCard;