Home
Hamza Atig
Swiss-Grid Dark Pricing

Swiss-Grid Dark Pricing

A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

This tailwind example is contributed by Hamza Atig, on 27-Dec-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing Other Grid

Author Hamza Atig

Fork Fullscreen

<div class="w-full bg-neutral-950 text-neutral-200 py-24 px-6 md:px-12 font-sans selection:bg-lime-400 selection:text-black">
  
  <div class="max-w-7xl mx-auto">
    <div class="flex flex-col md:flex-row justify-between items-end mb-16 border-b border-neutral-800 pb-8">
      <h2 class="text-6xl md:text-8xl font-bold tracking-tighter text-white">
        Plans<span class="text-lime-400">.</span>
      </h2>
      <p class="text-neutral-500 font-mono text-sm uppercase tracking-widest mt-4 md:mt-0 md:text-right max-w-xs">
        Crafted for scale.<br>
        Optimized for performance.
      </p>
    </div>

<div class="grid grid-cols-1 md:grid-cols-3 border-l border-neutral-800">
      
      <div class="group relative border-r border-y md:border-y-0 md:border-b border-neutral-800 p-8 md:p-12 transition-colors duration-500 hover:bg-neutral-900/50 flex flex-col justify-between min-h-[500px]">
        <div>
          <div class="inline-block px-3 py-1 mb-6 text-xs font-mono border border-neutral-700 rounded-full text-neutral-400 group-hover:border-neutral-500 transition-colors">
            01 / INDIE
          </div>
          <h3 class="text-3xl font-medium text-white mb-2">Hobbyist</h3>
          <p class="text-neutral-500 text-sm leading-relaxed mb-8">For side projects and experiments.</p>
          
          <div class="text-5xl font-bold text-white tracking-tight mb-8">
            $0 <span class="text-lg text-neutral-600 font-normal">/mo</span>
          </div>

<ul class="space-y-4 font-mono text-sm text-neutral-400">
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-neutral-700 rounded-full group-hover:bg-lime-400 transition-colors"></span>
              Single User
            </li>
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-neutral-700 rounded-full group-hover:bg-lime-400 transition-colors"></span>
              5 Projects
            </li>
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-neutral-700 rounded-full group-hover:bg-lime-400 transition-colors"></span>
              Community Access
            </li>
          </ul>
        </div>
        
        <button class="w-full mt-12 py-4 border border-neutral-700 text-white font-medium hover:bg-white hover:text-black hover:border-white transition-all duration-300">
          Start Free
        </button>
      </div>

<div>
          <div class="flex justify-between items-start mb-6">
            <div class="inline-block px-3 py-1 text-xs font-mono border border-lime-400/30 text-lime-400 rounded-full bg-lime-400/10">
              02 / PROFESSIONAL
            </div>
          </div>
          
          <h3 class="text-3xl font-medium text-white mb-2">Startup</h3>
          <p class="text-neutral-500 text-sm leading-relaxed mb-8">Power for growing teams.</p>
          
          <div class="text-5xl font-bold text-white tracking-tight mb-8">
            $49 <span class="text-lg text-neutral-600 font-normal">/mo</span>
          </div>

<ul class="space-y-4 font-mono text-sm text-neutral-300">
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-lime-400 rounded-full shadow-[0_0_8px_rgba(163,230,53,0.5)]"></span>
              Up to 10 Users
            </li>
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-lime-400 rounded-full shadow-[0_0_8px_rgba(163,230,53,0.5)]"></span>
              Unlimited Projects
            </li>
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-lime-400 rounded-full shadow-[0_0_8px_rgba(163,230,53,0.5)]"></span>
              Analytics Dashboard
            </li>
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-lime-400 rounded-full shadow-[0_0_8px_rgba(163,230,53,0.5)]"></span>
              24h Support Response
            </li>
          </ul>
        </div>

<button class="w-full mt-12 py-4 bg-lime-400 text-black font-bold hover:bg-lime-300 transition-colors duration-300 shadow-[0_0_20px_rgba(163,230,53,0.1)] hover:shadow-[0_0_30px_rgba(163,230,53,0.3)]">
          Get Started
        </button>
      </div>

<div class="group relative border-r border-b border-neutral-800 p-8 md:p-12 transition-colors duration-500 hover:bg-neutral-900/50 flex flex-col justify-between min-h-[500px]">
        <div>
          <div class="inline-block px-3 py-1 mb-6 text-xs font-mono border border-neutral-700 rounded-full text-neutral-400 group-hover:border-neutral-500 transition-colors">
            03 / CORP
          </div>
          <h3 class="text-3xl font-medium text-white mb-2">Agency</h3>
          <p class="text-neutral-500 text-sm leading-relaxed mb-8">Custom infrastructure & SLAs.</p>
          
          <div class="text-5xl font-bold text-white tracking-tight mb-8">
            Talk <span class="text-lg text-neutral-600 font-normal">to us</span>
          </div>

<ul class="space-y-4 font-mono text-sm text-neutral-400">
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-neutral-700 rounded-full group-hover:bg-lime-400 transition-colors"></span>
              Unlimited Users
            </li>
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-neutral-700 rounded-full group-hover:bg-lime-400 transition-colors"></span>
              Dedicated Instance
            </li>
            <li class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 bg-neutral-700 rounded-full group-hover:bg-lime-400 transition-colors"></span>
              Audit Logs
            </li>
          </ul>
        </div>

<button class="w-full mt-12 py-4 border border-neutral-700 text-white font-medium hover:bg-white hover:text-black hover:border-white transition-all duration-300">
          Contact Sales
        </button>
      </div>

</div>
  </div>
</div>

Related Examples

Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

10 months ago

3.5k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

10 months ago

1.3k
Active Beauty Main Page

Author:
Maxim

9 months ago

1.1k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

9 months ago

538
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

8 months ago

1.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

8 months ago

1.3k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

8 months ago

1.2k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

8 months ago

712
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

8 months ago

941
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

8 months ago

1.4k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

8 months ago

598

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components