Компонент макета
Адаптивный компонент макета блога, разработанный в соответствии с принципами Material Design, использующий монохроматическую цветовую схему и поддерживающий темный режим.
HTML-код
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
<div class="container mx-auto">
<header class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
<p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
</div>
<footer class="mt-10 text-center">
<p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
</footer>
</div>
</div>Связанные компоненты
Компоненты компоновки
Сложный компонент макета, предназначенный для блогов и потребления контента, с микровзаимодействиями и дополнительной цветовой схемой. Он включает в себя различные интерактивные элементы и поддерживает темный режим.
Компонент макета для социальных сетей
Адаптивный и сложный компонент макета для социальных сетей, вдохновленный 3D, с яркими цветами и поддержкой темных тем с использованием Tailwind CSS. Он включает в себя шапку с логотипом и навигацией, основную область контента с динамическими карточками для постов и боковую панель для профилей пользователей и трендовых тем. Каждый элемент стилизован таким образом, чтобы создать ощущение глубины и взаимодействия.
Компоненты компоновки Компонент 40
Адаптивный компонент макета с микровзаимодействиями и привлекательной анимацией. Он включает в себя структуру карточек с такими взаимодействиями с пользователем, как эффекты наведения, масштабирование и настройка темной темы.