Компонент отображения содержимого
Адаптивный компонент отображения контента, стилизованный под Glassmorphism, с размытым фоном и полупрозрачными элементами с поддержкой темного режима.
HTML-код
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
</div>
</div>
<img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
</div>
</div>Связанные компоненты
Компонент компонентов отображения содержимого
Компонент отображения содержимого с микровзаимодействиями, адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS. Имеет тонкие эффекты Hover и фокусирует анимацию на интерактивных элементах.
Pastel3DBlogContentCard (Пастель3DBlogContentCard)
Адаптивный компонент отображения контента для блогов или разделов контента, разработанный с помощью Tailwind CSS. Он отличается простой компоновкой с эстетикой, вдохновленной 3D, с использованием теней и эффектов наведения. Цветовая гамма - мягкая пастель для светлого режима, с совместимой темой темного режима. Компонент включает в себя изображение, название, метаданные (автор/дата), выдержку и кнопку «Подробнее». Изображения-заполнители используются из picsum.photos и randomuser.me.
Компонент отображения содержимого
Адаптивный компонент отображения контента с минималистичным и плоским дизайном, идеально подходящий для блогов и потребления контента. Он имеет цветовую гамму в оттенках серого и оснащен интерактивными элементами с поддержкой темного режима.