Компонент инфографики
Минималистичная составляющая инфографики с чистыми пространствами и минимальным количеством элементов, поддержкой адаптивного дизайна и темной тематики.
HTML-код
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
</div>
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
</div>
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
</div>
</div>
<div class="mt-6 border-t pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
</div>
</div>
</div>Связанные компоненты
Компонент инфографики
Компонент инфографики - Темный режим пользовательского интерфейса с оттенками серого и сложным дизайном. Адаптивный с поддержкой темных тем.
Компонент инфографики
Простой компонент инфографики, разработанный с 3D-эстетикой, с использованием пастельных тонов для интерфейсов социальных сетей, с поддержкой темного режима.
Ретро винтажный компонент инфографики
Отзывчивый компонент информационной панели для социальных сетей в пастельных тонах в стиле ретро/винтаж, созданный с помощью Tailwind CSS, со статистикой профиля пользователя, трендовой гистограммой хэштегов и иллюстративным изображением. Включает поддержку темного режима через префикс dark: от Tailwind и интерактивную анимацию наведения (JavaScript не требуется).