Компоненты визуализации данных
Адаптивный компонент визуализации данных, разработанный с использованием принципов Material Design, таких как макеты на основе сетки и эффекты глубины, с поддержкой темных тем.
HTML-код
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition-all ease-in-out duration-300">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 1</h3>
<img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 1 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 2</h3>
<img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 2 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 3</h3>
<img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 3 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 4</h3>
<img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 4 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 5</h3>
<img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 5 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 6</h3>
<img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 6 goes here.</p>
</div>
</div>
<div class="mt-4 text-center">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-200">Load More</button>
</div>
</div>Связанные компоненты
Social_Media_Dashboard
Сложный компонент панели управления социальными сетями с монохромной эстетикой Material Design, включающей макеты на основе сетки, эффекты глубины и отзывчивость с поддержкой темного режима. Предназначен для интерфейсов социальных сетей.
Компонент компонентов визуализации данных
Простой компонент визуализации данных в темном режиме для социальных сетей с аналогичной цветовой гаммой.
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Элегантный и сложный компонент визуализации данных, разработанный для платформ знакомств и социальных сетей, с цветовой схемой в оттенках серого и адаптивным макетом с поддержкой темного режима. Отображает статистику пользователей и метрики подключения.