Компоненты Инфографика Компонент инфографики

Компонент инфографики

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

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

HTML-код

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md flex flex-col items-center">
    <div class="bg-white dark:bg-gray-700 p-4 rounded-full shadow-lg mb-4">
        <img src="https://picsum.photos/80/80" alt="Infographic Image" class="rounded-full">
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
    <p class="text-gray-600 dark:text-gray-400">CEO, Company XYZ</p>
    <div class="mt-4 flex justify-between w-full">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Projects</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">120</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Clients</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">80</p>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg w-full text-center">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Satisfaction Rate</h3>
        <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">95%</p>
    </div>
</div>

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

Компонент инфографики

Компонент инфографики со стилем Neumorphism, Цветовая схема в оттенках серого, Простой макет, для целей Dashboard, Адаптивный с поддержкой темной темы

Открытый

Компонент инфографики

Компонент инфографики в стиле Брутализм, высокая контрастность, необычная верстка, адаптивный с поддержкой темного режима с использованием попутного ветра css

Открытый

Компонент инфографики

Сложный, адаптивный компонент инфографики для бизнес-сайтов, разработанный в стиле скевоморфизма и яркой цветовой схемы с использованием Tailwind CSS. Включает поддержку темного режима и интерактивные элементы.

Открытый