SnippetUI
← Back to snippets

Layout Bento Grid

Bố cục lưới hộp bento hiện đại, không đối xứng, phổ biến cho phần giới thiệu tính năng và bảng điều khiển.

HTMLTailwind CSS

Xem trước

NEW FEATURE

Create without limits

Our new AI-powered creation engine gives you the tools to build faster and smarter than ever before.

Lightning Fast

Optimized for speed. Experience sub-second load times.

Analytics

Track your progress with real-time insights.

Secure Environment

Enterprise-grade security built directly into the core of your application.

Avatar

Jane Doe

Lead Designer

Trường hợp sử dụng và tính năng

Bố cục lưới Bento là một mẫu thiết kế sắp xếp gọn gàng các thành phần có kích thước khác nhau giống như một câu đố.

  • Tính năng: Lý tưởng để thu hút trực quan nhiều tính năng của sản phẩm trên trang đích.
  • Bảng điều khiển: Sắp xếp và sắp xếp các widget có kích thước khác nhau để ưu tiên thông tin.
  • Portfolio: Giúp bạn liệt kê các dự án, kỹ năng, hồ sơ,… của mình một cách hấp dẫn.

Điểm độc đáo là dù mỗi lá bài có một ý nghĩa độc lập nhưng lại mang lại cảm giác thống nhất về tổng thể (giống như hộp cơm bento), nên ngay cả khi mật độ thông tin cao, người dùng cũng không cảm thấy choáng ngợp.

Điểm thiết kế và UX

  1. Hướng mắt: Bằng cách đặt các tấm thẻ lớn như 2x2, bạn có thể thu hút sự chú ý của người dùng một cách mạnh mẽ đến thông điệp chính mà bạn muốn truyền tải.
  2. Hiệu ứng di chuột: Mang lại cho mỗi thẻ cảm giác tương tác, hiện đại bằng cách kết hợp tăng tỷ lệ nhỏ, thay đổi bóng và hoạt ảnh thành phần bên trong.
  3. Các góc bo tròn (Bán kính): Bằng cách đặt các góc tròn lớn hơn (chẳng hạn như rounded-[2rem]), bạn có thể nhấn mạnh cảm giác Bento mềm mại và thân thiện.
  4. Thiết kế đáp ứng: Được thiết kế để quay trở lại một cột duy nhất trên thiết bị di động (điện thoại thông minh) và thay đổi thành cấu hình lưới phức tạp trên máy tính bảng trở lên.

Cách tùy chỉnh

  • Thay đổi kích thước lưới: Bạn có thể tạo bố cục tự do bằng cách thay đổi md:grid-cols-4 và md:grid-rows-3 của vùng chứa chính và điều chỉnh col-span và row-span của các phần tử con.
  • Màu sắc và Độ chuyển màu: Thay đổi màu nền của mỗi thẻ (ví dụ: bg-gradient-to-br from-indigo-500 to-purple-600) để phù hợp với màu sắc thương hiệu của bạn.
  • Tương thích với chế độ tối: Tối ưu hóa khả năng hiển thị ở chế độ tối bằng cách sử dụng dark:bg-slate-800 và dark:text-white. Nó có thể được điều chỉnh cho phù hợp với chủ đề dự án của bạn.

Mã triển khai

<div class="grid grid-cols-1 sm:grid-cols-4 grid-rows-none sm:grid-rows-3 gap-4 sm:gap-6 p-4 max-w-5xl mx-auto h-auto w-full grid-flow-row-dense">
<!-- Large Hero Card (2x2) -->
<div class="col-span-1 sm:col-span-2 row-span-1 sm:row-span-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-[2rem] p-8 text-white shadow-lg shadow-indigo-200/50 dark:shadow-none flex flex-col justify-between overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <div class="relative z-10">
    <span class="inline-block py-1 px-3 rounded-full bg-white/20 backdrop-blur-md text-xs font-semibold tracking-wider mb-4 border border-white/10 text-white">NEW FEATURE</span>
    <h3 class="text-3xl sm:text-4xl font-bold mb-3 leading-tight">Create without limits</h3>
    <p class="text-indigo-100 text-base sm:text-lg max-w-md">Our new AI-powered creation engine gives you the tools to build faster and smarter than ever before.</p>
  </div>
  <div class="mt-8 relative z-10">
    <button class="bg-white text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700 transition-colors px-6 py-3 rounded-full font-semibold shadow-md flex items-center gap-2 w-fit">
      Get Started
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </button>
  </div>
  <!-- Decorative elements -->
  <div class="absolute top-0 right-0 -mr-8 -mt-8 w-64 h-64 bg-gradient-to-br from-purple-400/40 to-transparent rounded-full blur-3xl pointer-events-none"></div>
  <div class="absolute -bottom-16 -right-16 w-80 h-80 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-all duration-700 pointer-events-none"></div>
</div>

<!-- Top Right Card (1x1) -->
<div class="col-span-1 bg-white dark:bg-slate-800/80 backdrop-blur-xl rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700/50 flex flex-col justify-between transition-all hover:shadow-md hover:-translate-y-1 duration-300">
  <div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-2xl flex items-center justify-center mb-4">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </div>
  <div>
    <h4 class="text-xl font-bold text-slate-800 dark:text-white mb-2">Lightning Fast</h4>
    <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">Optimized for speed. Experience sub-second load times.</p>
  </div>
</div>

<!-- Tall Card (1x2) -->
<div class="col-span-1 sm:row-span-2 bg-gradient-to-b from-rose-400 to-orange-500 rounded-[2rem] p-6 shadow-lg shadow-rose-200/50 dark:shadow-none text-white flex flex-col justify-between overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <div class="relative z-10">
     <div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 border border-white/10">
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
     </div>
     <h4 class="text-xl font-bold mb-2">Analytics</h4>
     <p class="text-rose-100 text-sm">Track your progress with real-time insights.</p>
  </div>
  <div class="mt-8 h-32 w-full flex items-end gap-2 pt-4 relative z-10">
    <div class="w-full bg-white/20 rounded-t-lg h-[30%] group-hover:h-[40%] transition-all duration-500 ease-out"></div>
    <div class="w-full bg-white/30 rounded-t-lg h-[50%] group-hover:h-[70%] transition-all duration-500 ease-out delay-75"></div>
    <div class="w-full bg-white/50 rounded-t-lg h-[70%] group-hover:h-[90%] transition-all duration-500 ease-out delay-100"></div>
    <div class="w-full bg-white/80 rounded-t-lg h-[90%] group-hover:h-[100%] transition-all duration-500 ease-out delay-150"></div>
  </div>
  <!-- Decorative radial gradient -->
  <div class="absolute inset-0 bg-gradient-to-t from-orange-600/50 to-transparent pointer-events-none"></div>
</div>

<!-- Wide Card (4x1) -->
<div class="col-span-1 sm:col-span-4 bg-slate-900 rounded-[2rem] p-6 sm:p-8 shadow-xl text-white flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <!-- Dot pattern background -->
  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMS41IiBjeT0iMS41IiByPSIxLjUiIGZpbGw9IiNmZmZmZmYwZCIvPjwvc3ZnPg==')] opacity-50 group-hover:opacity-70 transition-opacity duration-500"></div>
  
  <div class="relative z-10 flex-1">
    <div class="flex items-center gap-3 mb-2">
      <span class="flex h-3 w-3 relative">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
      </span>
      <h4 class="text-xl font-bold">Secure Environment</h4>
    </div>
    <p class="text-slate-400 text-sm max-w-sm">Enterprise-grade security built directly into the core of your application.</p>
  </div>
  <div class="relative z-10 w-16 h-16 bg-slate-800/80 backdrop-blur-md rounded-2xl border border-slate-700/50 flex items-center justify-center flex-shrink-0 group-hover:border-emerald-500/30 transition-colors duration-300">
    <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
  </div>
  
  <!-- Glow effect -->
  <div class="absolute top-1/2 right-1/4 -translate-y-1/2 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div>
</div>

<!-- Bottom Left Card (1x1) -->
<div class="col-span-1 bg-white dark:bg-slate-800/80 backdrop-blur-xl rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700/50 flex flex-col justify-center items-center text-center transition-all hover:shadow-md hover:-translate-y-1 duration-300 group cursor-pointer">
  <div class="relative w-16 h-16 mb-4">
    <div class="absolute inset-0 bg-gradient-to-tr from-pink-500 to-violet-500 rounded-full animate-spin-slow opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-sm"></div>
    <div class="absolute inset-0 bg-gradient-to-tr from-pink-500 to-violet-500 rounded-full p-[2px] group-hover:scale-105 transition-transform duration-300">
      <div class="w-full h-full bg-white dark:bg-slate-800 rounded-full p-1">
        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jane" alt="Avatar" class="w-full h-full rounded-full object-cover" />
      </div>
    </div>
    <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 border-2 border-white dark:border-slate-800 rounded-full z-10"></div>
  </div>
  <h4 class="text-lg font-bold text-slate-800 dark:text-white mb-0.5">Jane Doe</h4>
  <p class="text-slate-500 dark:text-slate-400 text-xs font-medium">Lead Designer</p>
</div>
</div>

Trạng thái tương thích với trình duyệt

Nó sử dụng CSS Grid và Tailwind CSS và được hỗ trợ rộng rãi bởi các trình duyệt hiện đại.

  • Chrome: phiên bản mới nhất
  • Firefox: phiên bản mới nhất
  • Safari: phiên bản mới nhất
  • Cạnh: Phiên bản mới nhất
  • iOS Safari: Phiên bản mới nhất
  • Android Chrome: phiên bản mới nhất