Компонент компонентов отображения содержимого
Адаптивный компонент отображения контента, разработанный для бизнес/корпоративных сайтов с поддержкой темного режима и яркой цветовой гаммой. Он включает в себя разделы для аватаров пользователей, текстового контента и изображений.
HTML-код
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Our Team</h2>
<div class="grid md:grid-cols-2 gap-5">
<div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
<img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
<div class="flex items-center mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<p class="text-lg font-semibold">John Doe</p>
<p class="text-sm text-gray-400">CEO</p>
</div>
</div>
<p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
<img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
<div class="flex items-center mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="ml-3">
<p class="text-lg font-semibold">Jane Smith</p>
<p class="text-sm text-gray-400">CTO</p>
</div>
</div>
<p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
</div>
</div>
<h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
<div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
<ul class="list-disc list-inside">
<li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
<li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
<li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
</ul>
</div>
</div>
Связанные компоненты
Material Design Триадическая информационная панель Карта
Простой, отзывчивый компонент отображения содержимого панели управления с эстетикой Material Design, использующий триадическую цветовую схему и поддержку темного режима. Подходит для отображения ключевых метрик или информации.
Компонент отображения содержимого
Компонент отображения адаптивного контента, который включает в себя микровзаимодействия с привлекательной анимацией, ориентированной на действия пользователя. Он включает в себя поддержку темного режима и заполнители для изображений и аватаров.
Карта содержимого Material Design для образования
Простая, адаптивная карточка контента, разработанная с учетом принципов Material Design, фирменной синей цветовой гаммы и поддержки темного режима, подходит для образовательных платформ.