검색 구성 요소

카테고리

열

다중 열 콘텐츠 레이아웃

Brutalist Columns 컴포넌트

브루탈리즘 디자인으로 스타일링된 복잡한 열 구성 요소로, 단색 색 구성표로 블로그 또는 콘텐츠 소비에 적합합니다. 이 디자인은 고대비, 특이한 레이아웃을 특징으로 하며 다크 모드를 지원합니다.

                <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>

Columns 구성 요소

어스 톤의 브루탈리즘 스타일로 디자인된 반응형 Columns Component는 전자 상거래에 적합하며 중간 수준의 복잡성과 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="container mx-auto p-6">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 1</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 1. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$19.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 2</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 2. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$29.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 3</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 3. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$39.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 4</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 4. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$49.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 5</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 5. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$59.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 6</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 6. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$69.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Columns 구성 요소

소셜 네트워킹 인터페이스를 위해 설계된 회색조 색 구성표가 있는 미니멀리스트 열 구성 요소입니다. 어두운 테마를 지원하는 반응형 레이아웃이 특징입니다.

열다 미리 보기

                <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>

Columns 구성 요소

Glassmorphism 스타일, 트라이어드 색 구성표, 비즈니스/기업 목적을 위한 단순 복잡성 수준을 갖춘 반응형 열 구성 요소에는 다크 모드 지원이 포함됩니다.

열다 미리 보기

                 responsibly written html code with tailwind classes which apply Glassmorphism style, Triadic color scheme, Simple complexity level, includes dark mode support, is responsive, and uses picsum.photos or randomuser.me if needed.

Columns 구성 요소 Neumorphism

Columns Component Neumorphism 컬럼 컴포넌트 뉴모피즘 - 미묘한 그림자를 사용하여 배경에서 돌출된 것처럼 보이는 요소를 만드는 소프트 UI 스타일입니다. 이 구성 요소는 반응형이며 어두운 테마를 지원합니다. JavaScript 코드가 필요하지 않습니다. 다크 모드의 경우 CSS 지원으로 충분합니다.

열다 미리 보기

                <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 p-4 dark:bg-gray-800">
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 1</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 2</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 3</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

<style>
/* Basic Neumorphism shadows - adjust values for desired effect */
.shadow-xl {
  box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}

.dark .shadow-xl-dark {
  box-shadow: 8px 8px 15px #444444, -8px -8px 15px #333333;
}
</style>

Columns 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Material Design 스타일의 Columns Component입니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 1. It uses Material Design principles for styling and responsiveness.</p>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 2. The columns are responsive, adapting to different screen sizes.</p>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 3. Dark mode is supported, changing the background and text colors.</p>
    </div>
  </div>
</div>

Columns 구성 요소

3D 디자인 요소와 어두운 테마가 있는 반응형 열 구성 요소는 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column one. It includes engaging content about the service or feature.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column two. Showcase your content effectively with appealing design.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column three. Engage your users with powerful imagery and text.</p>
      </div>
    </div>
  </div>
</div>

Columns 구성 요소

레트로/빈티지 미학으로 디자인된 반응형 Columns 구성 요소로, 밝은 테마와 어두운 테마를 모두 지원합니다. 각각 picsum.photos 및 randomuser.me 의 자리 표시자 이미지와 아바타가 있습니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-8">Retro Columns</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 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel risus vitae nisl euismod aliquam.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">Jane Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Smith</p>
                </div>
            </div>
        </div>
    </div>
</div>

Columns 구성 요소

Tailwind CSS를 사용하여 다크 모드로 스타일링된 반응형 열 구성 요소로, 아바타 및 이미지 플레이스홀더를 제공합니다.

열다 미리 보기

                <div class="bg-gray-900 text-white p-6">
    <h2 class="text-2xl font-bold mb-4">Columns Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Column 1 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User One</span>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
        </div>
        <!-- Column 2 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Two</span>
            </div>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
        <!-- Column 3 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Three</span>
            </div>
            <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
        </div>
    </div>
</div>

Columns 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 열 구성 요소로, 스타일링, 어두운 테마 지원 및 반응형 애니메이션을 위해 Tailwind CSS를 활용합니다.

열다 미리 보기

                <div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold my-6 text-gray-800 dark:text-gray-200">Columns Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 1</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 2</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the second column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 3</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the third column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 4</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fourth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=5" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 5</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fifth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=6" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 6</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the sixth column. It can contain any content.</p>
        </div>
    </div>
</div>