Brutalist Columns 컴포넌트
브루탈리즘 디자인으로 스타일링된 복잡한 열 구성 요소로, 단색 색 구성표로 블로그 또는 콘텐츠 소비에 적합합니다. 이 디자인은 고대비, 특이한 레이아웃을 특징으로 하며 다크 모드를 지원합니다.
HTML 코드
<div class="container mx-auto p-6">
<h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Brutalist Columns Component</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">Animi, cupiditate! Doloremque aperiam sit perspiciatis quam.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/202" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">Qui facere, necessitatibus quos aut eius optio deserunt.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/203" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 4</h2>
<p class="text-gray-700 dark:text-gray-300">Aliquam explicabo, at velit? Voluptate, facere voluptatem?</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/204" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 5</h2>
<p class="text-gray-700 dark:text-gray-300">Adipisci veniam, nobis porro repellat quo beatae impedit?</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/205" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 6</h2>
<p class="text-gray-700 dark:text-gray-300">Perferendis est provident, voluptatum dolor cumque atque.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
</div>
</div>