Компоненты Панели мониторинга Компонент панели управления

Компонент панели управления

Простой компонент приборной панели с 3D-дизайном и пастельной цветовой гаммой, отзывчивый и с поддержкой темного режима.

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

HTML-код

<div class="flex flex-wrap bg-gray-100 dark:bg-gray-900">
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-blue rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-users fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Users</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">2,156 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 10%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-pink rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-chart-line fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Sales</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$5,340 <span class="text-pastel-red text-base"><i class="fas fa-arrow-down"></i> 5%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-yellow rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-wallet fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Revenue</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$1,234 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 12%</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

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

Компонент «Дашборды»

Компонент приборной панели в стиле ретро, разработанный для деловых или корпоративных веб-сайтов, сочетает в себе эстетику 80-х/90-х годов с современным макетом и цветовой гаммой. Он адаптивный и поддерживает темную тему с интерактивными элементами, такими как карточки для статистики, профили пользователей и многое другое.

Открытый

Социальная панель в стиле ар-деко

Компонент панели управления средней сложности для платформ знакомств / социальных сетей, выполненный в стиле ар-деко с приглушенными/ненасыщенными цветами и полной отзывчивостью. Включает карточки профилей, ленту действий и навигацию с поддержкой темного режима.

Открытый

Dashboard_Component

Отзывчивый компонент финансовой / банковской панели с акварельным/художественным стилем дизайна и теплой цветовой гаммой заката. Включает поддержку темного режима и умеренный уровень сложности.

Открытый