Компонент "Колонны"
Минималистичный компонент колонок с цветовой гаммой в оттенках серого, разработанный для интерфейсов социальных сетей. Он отличается адаптивным макетом с поддержкой темных тем.
HTML-код
<div class="container mx-auto p-4 md:p-8">
<h1 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">User Profiles</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@johndoe</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Random Image">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@janesmith</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Random Image">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Michael Johnson</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@michaeljohnson</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Random Image">
</div>
</div>
</div>Связанные компоненты
Компонент "Колонны"
Адаптивный компонент столбцов, предназначенный для демонстрации портфолио с поддержкой темного режима, с использованием цветовой схемы в оттенках серого и CSS Tailwind.
Компонент "Колонны"
Компонент Columns, разработанный в стиле Glassmorphism, с яркими цветами и простым макетом, подходит для приборной панели.