Columns Component
A minimalist columns component with a grayscale color scheme designed for social networking interfaces. It features a responsive layout with dark theme support.
HTML Code
<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>Related Components
Columns Component
A responsive columns component with small engaging animations, suitable for e-commerce with a dark theme.
Columns Component
A responsive Columns Component designed in a Brutalist style with Earth tones, tailored for e-commerce, featuring medium complexity and dark theme support.