Компонент отображения содержимого
Компонент отображения контента в 3D-стиле, демонстрирующий портфолио, работы или продукты с цветовой схемой в оттенках серого и адаптивным дизайном, включая поддержку темного режима.
HTML-код
<div class="max-w-4xl mx-auto p-6">
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 5</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 6</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
</div>
</div>Связанные компоненты
Компоненты отображения содержимого
Простой компонент отображения адаптивного контента в винтажном стиле для электронной коммерции, использующий монохроматическую цветовую схему и поддерживающий темный режим.
Компонент отображения содержимого
Компонент отображения адаптивного контента, который включает в себя микровзаимодействия с привлекательной анимацией, ориентированной на действия пользователя. Он включает в себя поддержку темного режима и заполнители для изображений и аватаров.
Pastel3DBlogContentCard (Пастель3DBlogContentCard)
Адаптивный компонент отображения контента для блогов или разделов контента, разработанный с помощью Tailwind CSS. Он отличается простой компоновкой с эстетикой, вдохновленной 3D, с использованием теней и эффектов наведения. Цветовая гамма - мягкая пастель для светлого режима, с совместимой темой темного режима. Компонент включает в себя изображение, название, метаданные (автор/дата), выдержку и кнопку «Подробнее». Изображения-заполнители используются из picsum.photos и randomuser.me.