Компонент отображения содержимого
Компонент отображения контента с дизайном стекломорфизма с адаптивной версткой и поддержкой темных тем.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
</div>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>
</div>
</div>Связанные компоненты
Pastel3DBlogContentCard (Пастель3DBlogContentCard)
Адаптивный компонент отображения контента для блогов или разделов контента, разработанный с помощью Tailwind CSS. Он отличается простой компоновкой с эстетикой, вдохновленной 3D, с использованием теней и эффектов наведения. Цветовая гамма - мягкая пастель для светлого режима, с совместимой темой темного режима. Компонент включает в себя изображение, название, метаданные (автор/дата), выдержку и кнопку «Подробнее». Изображения-заполнители используются из picsum.photos и randomuser.me.
Карта содержимого Material Design для образования
Простая, адаптивная карточка контента, разработанная с учетом принципов Material Design, фирменной синей цветовой гаммы и поддержки темного режима, подходит для образовательных платформ.
Компонент отображения содержимого
Адаптивный компонент отображения контента с минималистичным и плоским дизайном, идеально подходящий для блогов и потребления контента. Он имеет цветовую гамму в оттенках серого и оснащен интерактивными элементами с поддержкой темного режима.