검색 구성 요소

카테고리

구성 요소 레이아웃 구성 요소

레이아웃 구성 요소

전체 페이지 레이아웃을 구조화하는 구성 요소

Neumorphism 포트폴리오 레이아웃

포트폴리오를 위한 간단하고 반응이 빠른 Neumorphism 레이아웃으로, 다크 모드를 지원합니다.

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8">
  <div class="container mx-auto">
    <!-- Header -->
    <header class="p-6 mb-8 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h1 class="text-3xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </header>

    <!-- Main Content -->
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 1</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 1.</p>
        <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>

      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 2</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 2.</p>
         <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>
    </main>

    <!-- Footer -->
    <footer class="mt-8 p-6 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-center text-gray-700 dark:text-gray-300">
      <p>&copy; 2023 My Portfolio</p>
    </footer>
  </div>
</div>

<style>
/* Custom Neumorphism Shadows */
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
</style>

레이아웃 구성 요소

블로그 및 콘텐츠 소비를 위해 설계된 복잡한 레이아웃 구성 요소로, 미시적 상호 작용과 보색 구성표를 특징으로 합니다. 여기에는 다양한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen">
    <header class="bg-blue-500 dark:bg-blue-700 p-4 shadow-md transition-colors duration-300">
        <h1 class="text-white text-2xl font-bold">My Blog</h1>
        <nav class="mt-2">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Home</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">About</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main class="py-10 px-4 sm:px-8 lg:px-16">
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is a brief description of the blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?2" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is another brief description. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?3" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Yet Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of yet another blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
        </section>
    </main>

    <footer class="bg-blue-500 dark:bg-blue-700 p-4 text-center text-white">
        <p>&copy; 2023 My Blog</p>
    </footer>
</div>

Glassmorphism 사업 레이아웃

어스 톤을 특징으로 하는 Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 glassmorphism 레이아웃 구성 요소입니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 p-8 rounded-xl shadow-lg w-4/5 md:w-2/3 lg:w-1/2 backdrop-filter backdrop-blur-lg">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Business Layout Component</h1>
    <p class="text-gray-600 dark:text-gray-300">This is a simple layout component showcasing glassmorphism with earth tones, suitable for business websites. It is responsive and supports dark mode.</p>
    <div class="mt-6 flex flex-col md:flex-row justify-between items-center">
      <div class="text-gray-700 dark:text-gray-200 mb-4 md:mb-0">
        <p>Contact Information:</p>
        <p>Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
    </div>
  </div>
</div>

레이아웃 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 블로그 레이아웃 구성요소로, 단색 색 구성표를 사용하고 어두운 모드를 지원합니다.

열다 미리 보기

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

Layout Components 컴포넌트

어두운 테마를 지원하는 소셜 미디어 애플리케이션을 위한 Material Design 원칙을 따르는 반응형 웹 구성 요소 레이아웃입니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Social Media Layout</h2>
    <div class="grid grid-cols-1 gap-4">
        <!-- Profile Header -->
        <div class="flex items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <!-- Post Content -->
        <div class="p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
            <p class="text-gray-800 dark:text-gray-200 mb-2">This is a simple post layout demonstrating the use of Material Design principles.</p>
            <img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-auto rounded-lg">
        </div>
        <!-- Action Buttons -->
        <div class="flex justify-around mt-4">
            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700">Comment</button>
            <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700">Share</button>
        </div>
    </div>
</div>

Glassmorphism E-commerce Feature Layout 구성 요소

열다 미리 보기

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Feature 1 -->
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Feature Image 1" class="rounded-lg mb-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <!-- Feature 2 -->
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Feature Image 2" class="rounded-lg mb-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <!-- Feature 3 -->
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Feature Image 3" class="rounded-lg mb-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

E-commerce 레이아웃 구성 요소

머티리얼 디자인 원칙에 따라 Tailwind CSS로 빌드된 어두운 테마를 지원하는 반응형 전자상거래 레이아웃 구성 요소입니다. 여기에는 탐색 모음, 제품 목록이 있는 기본 콘텐츠 영역 및 바닥글이 포함됩니다. 색 구성표는 파스텔입니다.

열다 미리 보기

                <div class="min-h-screen bg-pastel-100 dark:bg-pastel-900">
  <!-- Navigation Bar -->
  <nav class="bg-pastel-200 dark:bg-pastel-800 shadow">
    <div class="container mx-auto px-6 py-3">
      <div class="flex items-center justify-between">
        <div class="text-pastel-900 dark:text-pastel-100 font-semibold text-xl">My E-commerce</div>
        <div class="flex items-center space-x-4">
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Home</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Shop</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Cart</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content Area -->
  <main class="container mx-auto mt-6 px-6 py-3">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card (Repeat this block for multiple products) -->
      <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Product Name</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of the product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$19.99</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
      <!-- End Product Card -->

      <!-- Example of another product card -->
       <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Another Product</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of another product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$25.00</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-pastel-200 dark:bg-pastel-800 mt-6 py-6">
    <div class="container mx-auto text-center text-pastel-900 dark:text-pastel-100">
      <p>&copy; 2023 My E-commerce. All rights reserved.</p>
    </div>
  </footer>
</div>

Layout Components 컴포넌트

레트로/빈티지 디자인 미학으로 스타일링된 반응형 포트폴리오 레이아웃 구성 요소로, 유사한 색 구성표를 활용하고 작업 또는 제품을 선보이기 위한 대화형 기능을 통해 중간 정도의 복잡성을 충족하도록 설계되었습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-800 text-white p-6">
    <header class="mb-6">
        <h1 class="text-4xl font-bold text-center">My Retro Portfolio</h1>
    </header>
    <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 1</h2>
            <p class="text-gray-300">Description of the project showcasing the retro design style.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 2</h2>
            <p class="text-gray-300">Description of the project highlighting nostalgic elements from the past eras.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 3</h2>
            <p class="text-gray-300">Description of the project with a vintage flair and interactive features.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 4</h2>
            <p class="text-gray-300">Snapshot of the work that resonates with the audience's nostalgia.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 5</h2>
            <p class="text-gray-300">Work details that emphasize the vintage aesthetics of the project.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 6</h2>
            <p class="text-gray-300">Project insights with a nostalgic touch to engage viewers.</p>
        </div>
    </main>
    <footer class="mt-6 text-center">
        <h3 class="text-lg font-medium">About Me</h3>
        <div class="flex justify-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-500">
        </div>
        <p class="mt-2">Check out my work and get in touch!</p>
    </footer>
</div>

Layout Components 컴포넌트

사용자 작업에 응답하는 매력적인 애니메이션을 통해 마이크로 인터랙션을 보여주는 반응형 레이아웃 구성 요소로, 다크 모드를 지원하고 Tailwind CSS를 활용합니다.

열다 미리 보기

                <div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">User Profile</h2>
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full shadow-md transform hover:scale-110 transition-transform duration-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Follow</button>
</div>

<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Images Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=1" alt="Random Image">
        <img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=2" alt="Random Image">
        <img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=3" alt="Random Image">
    </div>
</div>

<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Contact Us</h2>
    <form>
        <input type="text" placeholder="Your Name" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
        <input type="email" placeholder="Your Email" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
        <textarea placeholder="Your Message" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300"></textarea>
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Send Message</button>
    </form>
</div>

3D 레이아웃 구성 요소

매력적인 비주얼을 갖춘 반응형 3D 디자인 레이아웃 구성 요소로, 그림자와 레이어를 통해 깊이를 통합합니다. 다크 모드 지원이 포함되며 임의의 이미지와 아바타가 있습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="max-w-4xl w-full p-6 rounded-lg shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">3D Layout Component</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image 1" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card item. It's designed to entice the user.</p>
            </div>
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image 2" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card item. It's designed to entice the user.</p>
            </div>
        </div>
        <div class="mt-6">
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Featured Users</h3>
            <div class="flex flex-wrap">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-12 h-12 object-cover rounded-full">
                </div>
            </div>
        </div>
    </div>
</div>