Компонент отображения содержимого
Отзывчивый компонент для демонстрации работ или товаров в темном стиле с пастельной цветовой гаммой.
HTML-код
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-pink-300 dark:text-pink-200 mb-4">Project Title</h2>
<img src="https://picsum.photos/400/200" alt="Project Image" class="rounded-lg mb-4 shadow-md">
<p class="text-gray-300 dark:text-gray-200 mb-4">This is a brief description of the project. It showcases the unique features and the value it brings to users.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2 shadow-lg">
<span class="text-gray-400 dark:text-gray-200">Posted by John Doe</span>
</div>
<a href="#" class="inline-block bg-pink-500 hover:bg-pink-400 text-white font-semibold py-2 px-4 rounded mt-2">View More</a>
</div>Связанные компоненты
Компонент отображения содержимого
Компонент отображения контента, выполненный в скевоморфном стиле для электронной коммерции с темной темой. Он демонстрирует продукты с минимальным количеством элементов, используя аналогичную цветовую гамму для приятной эстетики.
Компонент компонентов отображения содержимого
Компонент отображения содержимого с микровзаимодействиями, адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS. Имеет тонкие эффекты Hover и фокусирует анимацию на интерактивных элементах.
Pastel3DBlogContentCard (Пастель3DBlogContentCard)
Адаптивный компонент отображения контента для блогов или разделов контента, разработанный с помощью Tailwind CSS. Он отличается простой компоновкой с эстетикой, вдохновленной 3D, с использованием теней и эффектов наведения. Цветовая гамма - мягкая пастель для светлого режима, с совместимой темой темного режима. Компонент включает в себя изображение, название, метаданные (автор/дата), выдержку и кнопку «Подробнее». Изображения-заполнители используются из picsum.photos и randomuser.me.