## 1. Component Overview This pricing card component is designed to present a SaaS plan in a clear, conversion-focused way. It combines pricing details, a short value statement, and a feature list in a polished two-column layout that feels appropriate for a modern dashboard or product site. The component improves the interface by making the most important decision points easy to scan: plan name, price, included benefits, and the call-to-action. The icon-supported feature list adds visual clarity, while the responsive layout ensures the card remains usable and attractive across all device sizes. ## 2. Design Decisions The component uses a white card surface with blue accents to create a clean SaaS-style visual hierarchy. Blue is applied to headings, badges, icons, and the CTA to guide attention toward key actions without overwhelming the layout. The two-column structure separates pricing content from the features section. This improves scannability and allows users to compare information quickly. Generous spacing, rounded corners, and subtle shadows create a modern dashboard feel, while hover transitions add polish and interactivity. Accessibility and maintainability are supported through semantic HTML, clear heading structure, descriptive button labeling, sufficient contrast, and predictable Tailwind utility grouping. ## 3. Tailwind CSS Component Code ```html <section class="bg-slate-50 py-12 px-4 sm:px-6 lg:px-8"> <div class="mx-auto max-w-5xl"> <div class="group overflow-hidden rounded-2xl border border-blue-100 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl" aria-labelledby="pricing-card-title" > <div class="flex flex-col lg:flex-row"> <!-- Left Column --> <div class="w-full lg:w-5/12 border-b border-blue-100 p-6 sm:p-8 lg:border-b-0 lg:border-r"> <div class="flex items-center justify-between gap-4"> <div> <p class="text-sm font-semibold uppercase tracking-wide text-blue-600"> Pro Plan </p> <h2 id="pricing-card-title" class="mt-2 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl" > Built for growing SaaS teams </h2> </div> <span class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700 ring-1 ring-inset ring-blue-200" > Most Popular </span> </div> <p class="mt-4 text-sm leading-6 text-slate-600"> A flexible pricing plan for startups and product teams that need advanced analytics, collaboration tools, and priority support. </p> <div class="mt-6 flex items-end gap-2"> <span class="text-4xl font-extrabold tracking-tight text-slate-900">$29</span> <span class="pb-1 text-sm font-medium text-slate-500">/ month</span> </div> <p class="mt-2 text-sm text-slate-500"> Billed monthly. Cancel anytime. </p> <div class="mt-8"> <a href="#" class="inline-flex w-full items-center justify-center rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition-all duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-label="Start your Pro Plan free trial" > Start Free Trial </a> </div> <p class="mt-3 text-xs text-slate-500"> No credit card required for the trial. </p> </div> <!-- Right Column --> <div class="w-full lg:w-7/12 p-6 sm:p-8"> <div class="mb-6 flex items-center gap-3"> <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-100 text-blue-600"> <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l7.5 7.5L21 6" /> </svg> </div> <div> <h3 class="text-lg font-semibold text-slate-900"> Everything you need to scale </h3> <p class="text-sm text-slate-600"> Optimized for product-led teams and modern SaaS workflows. </p> </div> </div> <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2" role="list"> <li class="flex items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 transition-colors duration-300 hover:border-blue-200 hover:bg-blue-50"> <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-blue-600 shadow-sm"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12M6 12h12" /> </svg> </div> <div> <p class="text-sm font-semibold text-slate-900">Unlimited Projects</p> <p class="mt-1 text-sm text-slate-600"> Create and manage as many active workspaces as your team needs. </p> </div> </li> <li class="flex items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 transition-colors duration-300 hover:border-blue-200 hover:bg-blue-50"> <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-blue-600 shadow-sm"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" d="M4 7h16M4 12h10M4 17h16" /> </svg> </div> <div> <p class="text-sm font-semibold text-slate-900">Advanced Analytics</p> <p class="mt-1 text-sm text-slate-600"> Track user engagement, performance, and product trends in one place. </p> </div> </li> <li class="flex items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 transition-colors duration-300 hover:border-blue-200 hover:bg-blue-50"> <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-blue-600 shadow-sm"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h8M8 14h5M5 5h14v14H5z" /> </svg> </div> <div> <p class="text-sm font-semibold text-slate-900">Team Collaboration</p> <p class="mt-1 text-sm text-slate-600"> Invite teammates, assign roles, and collaborate securely. </p> </div> </li> <li class="flex items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 transition-colors duration-300 hover:border-blue-200 hover:bg-blue-50"> <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-blue-600 shadow-sm"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" d="M18 10c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6 6 2.686 6 6zm0 0v8" /> </svg> </div> <div> <p class="text-sm font-semibold text-slate-900">Priority Support</p> <p class="mt-1 text-sm text-slate-600"> Get faster response times and dedicated help when it matters most. </p> </div> </li> </ul> <div class="mt-6 rounded-xl bg-blue-50 p-4 ring-1 ring-inset ring-blue-100"> <p class="text-sm font-medium text-blue-900"> Perfect for startups, SaaS founders, and product teams looking for a clean upgrade path. </p> </div> </div> </div> </div> </div> </section> ``` ## 4. Responsive Behavior Explanation The component is built mobile-first. On small screens, the layout stacks vertically so users can first see pricing information and then review the included features below it. This makes the content easy to scroll and prevents cramped side-by-side sections. At larger breakpoints, the layout changes to a two-column structure using `lg:flex-row`. The left column focuses on pricing and conversion, while the right column presents benefits in a more detailed feature grid. Inside the features area, the cards display in one column on mobile and shift to two columns on small-to-medium screens with `sm:grid-cols-2`. ## 5. Customization Tips You can easily adapt this component by changing the plan label, pricing text, CTA copy, and features. For brand alignment, replace the blue palette classes such as `bg-blue-600`, `text-blue-600`, and `bg-blue-50` with your preferred Tailwind color scale. Spacing can be adjusted with padding and gap utilities like `p-6`, `p-8`, `gap-4`, and `mt-6`. To create layout variations, you can make the pricing side narrower or wider by changing `lg:w-5/12` and `lg:w-7/12`. You can also convert the feature items into a simple vertical list if you want a more compact pricing card. ## 6. Optional Enhancements You could extend this component with: * animated plan switching for monthly/yearly billing * a JavaScript-powered pricing toggle * dark mode support using Tailwind’s `dark:` utilities * improved keyboard interaction for interactive pricing controls * badges for discounts or limited-time offers * ARIA live regions for dynamic price updates * comparison table integration below the card If you want, I can also turn this into a React component or create 3 alternative pricing card styles in the same Tailwind design system.