Cards & Bento Layouts 3 Production-Ready Templates

Modern Bento Grids & 3D Tilt Cards

Showcase features with asymmetrical modern Bento Grids, physics-based 3D tilt hover cards, and interactive pricing tier switchers.

Responsive Grid 3D Perspective 1-Click Code Copy

Quick Navigation

1. Modern Bento Grid→2. 3D Mouse Tilt Card→3. Interactive Pricing Switcher→

Bento Architecture

1. Modern Responsive Bento Grid

Multi-span modular feature cards with gradient badges and clean typographic hierarchy.

Real-Time Sync

Instant Database Replication

Synchronize tables globally across 35 edge regions with sub-10ms query latency.

⚡

Zero Cold Starts

V8 isolate architecture.

0.02ms

🔒

End-to-End SSL

Automated TLS cert rotation.

A+ Security Grade

Granular Audit Logging

Track every single API query, team mutation, and permission update in structured JSON format.

<div class="bento-grid">
  <div class="bento-item span-2 hero-box">
    <span class="bento-badge">Real-Time Sync</span>
    <h3>Instant Database Replication</h3>
    <p>Synchronize tables globally across 35 edge regions with sub-10ms query latency.</p>
  </div>

  <div class="bento-item stat-box">
    <h4>Zero Cold Starts</h4>
    <span class="stat-number">0.02ms</span>
  </div>

  <div class="bento-item">
    <h4>End-to-End SSL</h4>
    <span class="security-grade">A+ Security Grade</span>
  </div>

  <div class="bento-item span-2">
    <h4>Granular Audit Logging</h4>
    <p>Track every single API query, team mutation, and permission update in structured JSON format.</p>
  </div>
</div>

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.bento-grid * {
  box-sizing: border-box;
}

.bento-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.bento-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -5px rgba(0, 0, 0, 0.08);
}

.bento-item h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
}

.bento-item p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
}

.span-2 {
  grid-column: span 2;
}

.hero-box {
  background: linear-gradient(135deg, #059669, #0f766e) !important;
  color: #ffffff !important;
  border: none;
}

.hero-box h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

.hero-box p {
  color: #d1fae5;
  font-size: 1rem;
}

.bento-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.85rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
  backdrop-filter: blur(8px);
}

.stat-number {
  font-size: 2.25rem;
  font-weight: 900;
  color: #059669;
  letter-spacing: -0.02em;
}

.security-grade {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}

Interactive 3D Physics

2. 3D Mouse-Tracking Tilt Card

Realistic perspective rotation tracking mouse cursor coordinates across the card surface.

Master Edition💳

Developer Black Card

Unlimited local compute & zero cloud telemetry.

•••• 8821EXP: 12/29

<div class="tilt-container">
  <div class="tilt-card" id="myTiltCard">
    <div class="card-header">
      <span class="card-tag">Master Edition</span>
      <span class="card-icon">💳</span>
    </div>
    <h3 class="card-title">Developer Black Card</h3>
    <p class="card-desc">Unlimited local compute & zero cloud telemetry.</p>
    <div class="card-footer">
      <span>•••• 8821</span>
      <span>EXP: 12/29</span>
    </div>
  </div>
</div>

.tilt-container {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  padding: 2rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.tilt-container * {
  box-sizing: border-box;
}

.tilt-card {
  width: 320px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.25rem;
  padding: 1.75rem;
  color: #ffffff;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out, box-shadow 0.3s ease;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.tilt-card:hover {
  box-shadow: 0 25px 50px rgba(13, 148, 136, 0.25);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.card-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #2dd4bf;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-icon {
  font-size: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
  color: #ffffff;
}

.card-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0 0 1.5rem 0;
  line-height: 1.4;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  font-family: monospace;
  font-size: 0.85rem;
  color: #cbd5e1;
}

const card = document.getElementById('myTiltCard');

if (card) {
  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;

    const rotateX = -(y / (rect.height / 2)) * 14;
    const rotateY = (x / (rect.width / 2)) * 14;

    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });

  card.addEventListener('mouseleave', () => {
    card.style.transform = 'rotateX(0deg) rotateY(0deg)';
  });
}

Interactive Pricing

3. Interactive Pricing Switcher Card

High-converting pricing card with monthly/annual billing toggle switch.

Pro Developer

$29/ month

Ideal for growing developer teams and full-stack builders.

✓ Unlimited client-side requests
✓ 35 global edge points
✓ Priority Discord support

Upgrade to Pro

<div class="pricing-container">
  <!-- Toggle Switch -->
  <div class="billing-switcher">
    <button class="switch-btn active" id="btnMonthly" onclick="setBillingPlan('monthly')">Monthly</button>
    <button class="switch-btn" id="btnAnnual" onclick="setBillingPlan('annual')">Annual (Save 20%)</button>
  </div>

  <!-- Pricing Card -->
  <div class="pricing-card">
    <span class="plan-badge">Pro Developer</span>
    <div class="price-wrap">
      <span id="price" class="price-val">$29</span>
      <span id="period" class="period-val">/ month</span>
    </div>
    <p class="plan-desc">Ideal for growing developer teams and full-stack builders.</p>
    <ul class="feature-list">
      <li><span class="check">✓</span> Unlimited client-side requests</li>
      <li><span class="check">✓</span> 35 global edge regions</li>
      <li><span class="check">✓</span> Priority Discord support</li>
    </ul>
    <a href="#upgrade" class="btn-buy">Upgrade to Pro</a>
  </div>
</div>

.pricing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.pricing-container * {
  box-sizing: border-box;
}

.billing-switcher {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  padding: 0.35rem;
  border-radius: 9999px;
  margin-bottom: 2rem;
  border: 1px solid #e2e8f0;
}

.switch-btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.switch-btn.active {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.pricing-card {
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.plan-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: #4f46e5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 1rem 0;
}

.price-val {
  font-size: 2.75rem;
  font-weight: 900;
  color: #0f172a;
}

.period-val {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 600;
}

.plan-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 1.5rem 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #334155;
  margin-bottom: 0.85rem;
}

.feature-list .check {
  color: #10b981;
  font-weight: 800;
}

.btn-buy {
  display: block;
  width: 100%;
  padding: 0.9rem;
  background: #4f46e5;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  border-radius: 0.75rem;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
  transition: all 0.2s ease;
}

.btn-buy:hover {
  background: #4338ca;
  transform: translateY(-2px);
}

function setBillingPlan(type) {
  const priceEl = document.getElementById('price');
  const periodEl = document.getElementById('period');
  const btnMonthly = document.getElementById('btnMonthly');
  const btnAnnual = document.getElementById('btnAnnual');

  if (type === 'annual') {
    priceEl.innerText = '$240';
    periodEl.innerText = '/ year';
    btnAnnual.classList.add('active');
    btnMonthly.classList.remove('active');
  } else {
    priceEl.innerText = '$29';
    periodEl.innerText = '/ month';
    btnMonthly.classList.add('active');
    btnAnnual.classList.remove('active');
  }
}

Frequently Asked Questions

What is a Bento Grid layout in web design?

Inspired by Japanese bento boxes, a Bento Grid is an asymmetrical modular layout that organizes features and stats into clean, rounded cards of varying widths and heights (e.g. 2-span and 1-span grid columns).

How does the 3D mouse tilt card work without heavy 3D engines?

It uses perspective: 1000px on the container and calculates mouse offset ratios on mousemove, applying a lightweight transform: rotateX() rotateY() to the card in real-time.

Can I easily add more pricing tiers or features to the pricing card?

Yes. The card uses simple repeating list items (<li>) with SVG checkmark icons and data-price attributes that update automatically when clicking the billing switch.