SaaS 가격표 레이아웃

다크 테마 기반의 3단 SaaS 가격표입니다. 추천 플랜 강조 효과가 포함되어 있습니다.

pricingsaasgriddark-theme
Gist 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
  body {
    background: #0f172a;
    color: #f8fafc;
    font-family: system-ui, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
  }
  .pricing-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    padding: 2rem;
  }
  .card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 1rem;
    padding: 2.5rem;
    text-align: center;
    transition: transform 0.3s;
  }
  .card:hover { transform: translateY(-10px); }
  .card.popular {
    border-color: #3b82f6;
    position: relative;
    scale: 1.05;
    background: #1e293b linear-gradient(180deg, rgba(59, 130, 246, 0.1), transparent);
  }
  .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
  }
  .price { font-size: 3rem; font-weight: 800; margin: 1rem 0; }
  .price span { font-size: 1rem; color: #94a3b8; }
  ul { list-style: none; padding: 0; margin: 2rem 0; text-align: left; }
  li { margin-bottom: 0.75rem; color: #cbd5e1; }
  li::before { content: "✓"; color: #3b82f6; margin-right: 0.5rem; }
  button {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: bold;
    cursor: pointer;
    background: #334155;
    color: white;
  }
  .popular button { background: #3b82f6; }
</style>
</head>
<body>
  <div class="pricing-container">
    <div class="card">
      <h3>Starter</h3>
      <div class="price">$0<span>/mo</span></div>
      <ul>
        <li>1 프로젝트</li>
        <li>기본 분석</li>
        <li>커뮤니티 지원</li>
      </ul>
      <button>시작하기</button>
    </div>
    <div class="card popular">
      <div class="badge">Most Popular</div>
      <h3>Pro</h3>
      <div class="price">$29<span>/mo</span></div>
      <ul>
        <li>10 프로젝트</li>
        <li>고급 분석</li>
        <li>우선 순위 지원</li>
        <li>커스텀 도메인</li>
      </ul>
      <button>가입하기</button>
    </div>
    <div class="card">
      <h3>Enterprise</h3>
      <div class="price">$99<span>/mo</span></div>
      <ul>
        <li>무제한 프로젝트</li>
        <li>실시간 분석</li>
        <li>24/7 전담 지원</li>
        <li>보안 옵션</li>
      </ul>
      <button>문의하기</button>
    </div>
  </div>
</body>
</html>