Компоненты Столбцы Компонент "Колонны"

Компонент "Колонны"

Компонент столбцов для приборной панели, отличающийся 3D-дизайном с дополнительными цветами. Он включает в себя три адаптивные колонки с простой версткой, поддержкой темного режима и использует Tailwind CSS для стилизации. JavaScript не включен.

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

HTML-код

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid gap-8 md:grid-cols-3">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Graph Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Data Placeholder</p>
        </div>
      </div>
    </div>

  </div>
</div>

Связанные компоненты

Компонент бруталистских колонн

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

Открытый

Компонент "Колонны"

Отзывчивый компонент колонн, выполненный в стиле ретро/винтаж, поддерживающий как светлую, так и темную темы. Содержит изображения-заполнители и аватары из picsum.photos и randomuser.me соответственно.

Открытый

Компонент "Колонны"

Адаптивный компонент колонок с элементами 3D-дизайна и поддержкой темной темы с использованием Tailwind CSS.

Открытый