SnippetUI
← Back to snippets

Сетка Bento

Асимметричная, современная сетка коробок для бенто, популярная для ознакомления с функциями и информационных панелей.

HTMLTailwind CSS

Предварительный просмотр

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

Варианты использования и функции

Сетка Bento — это шаблон проектирования, в котором аккуратно раскладываются компоненты разного размера, как в головоломке.

– Функции. Идеально подходит для визуальной привлекательности нескольких функций продукта на целевой странице.

  • Панель управления: систематизируйте и располагайте виджеты разных размеров для определения приоритетности информации.
  • Портфолио. Помогает вам составить привлекательное описание ваших проектов, навыков, профиля и т. д.

Уникальная особенность заключается в том, что хотя каждая карта имеет независимое значение, она дает ощущение единства в целом (как коробка для бенто), поэтому даже при высокой плотности информации пользователь не чувствует себя перегруженным.

##Точки дизайна и UX

  1. Направление взгляда. Размещая большие карточки, например 2x2, вы можете привлечь внимание пользователя к основному сообщению, которое хотите донести.
  2. Эффекты при наведении. Придайте каждой карточке современный интерактивный вид, включив небольшое масштабирование, изменение теней и анимацию внутренних элементов.
  3. Закругленные углы (Радиус): Установив более крупные закругленные углы (например, «закругленные-[2rem]»), вы можете подчеркнуть мягкость и дружелюбность Bento.
  4. Адаптивный дизайн: возможность вернуться к одному столбцу на мобильных устройствах (смартфонах) и перейти к сложной конфигурации сетки на планшетах и ​​более поздних версиях.

Как настроить

  • Изменить размер сетки. Вы можете создать бесплатный макет, изменив sm:grid-cols-4 и sm:grid-rows-3 родительского контейнера и настроив col-span и row-span дочерних элементов. – Цвета и градиенты. Измените цвет фона каждой карточки (например, «bg-gradient-to-br from-indigo-500 to-purple-600»), чтобы он соответствовал цветам вашего бренда.
  • Совместимость с темным режимом. Оптимизирована видимость в темном режиме с использованием «dark:bg-slate-800» и «dark:text-white». Его можно настроить в соответствии с темой вашего проекта.

Код реализации

<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>

Статус совместимости браузера

Он использует CSS Grid и Tailwind CSS и широко поддерживается современными браузерами.

  • Chrome: последняя версия
  • Firefox: последняя версия
  • Сафари: последняя версия
  • Край: последняя версия
  • iOS Safari: последняя версия.
  • Android Chrome: последняя версия