검색 구성 요소

카테고리

구성 요소 콘텐츠 표시 구성 요소

콘텐츠 표시 구성 요소

웹 사이트에서 콘텐츠를 제공하고 구성하는 구성 요소

Content Display 구성 요소

어두운 테마의 전자 상거래를 위해 스큐어모픽 스타일로 설계된 Content Display Component입니다. 유쾌한 미학을 위해 유사한 색 구성표를 사용하여 최소한의 요소로 제품을 선보입니다.

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <div class="flex flex-col justify-center items-center">
    <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
      <p class="text-gray-600 dark:text-gray-300">$29.99</p>
      <p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
      </div>
      <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
    </div>
  </div>
</div>

Content Display Components 컴포넌트

비즈니스/기업 웹 사이트를 위해 설계된 반응형 콘텐츠 디스플레이 구성 요소로, 다크 모드를 지원하고 생생한 색 구성표를 제공합니다. 여기에는 사용자 아바타, 텍스트 콘텐츠 및 이미지에 대한 섹션이 포함됩니다.

열다 미리 보기

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Our Team</h2>
    <div class="grid md:grid-cols-2 gap-5">
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-sm text-gray-400">CEO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">Jane Smith</p>
                    <p class="text-sm text-gray-400">CTO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
        </div>
    </div>
    <h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
    <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
        <ul class="list-disc list-inside">
            <li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
            <li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
            <li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
        </ul>
    </div>
</div>

Content Display 구성 요소

Glassmorphism으로 스타일링된 반응형 콘텐츠 디스플레이 구성 요소로, 어두운 모드를 지원하는 흐릿한 배경과 반투명 요소를 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
                <span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
            </div>
        </div>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
    </div>
</div>

Content Display 구성 요소

반응형 레이아웃과 어두운 테마를 지원하는 glassmorphism 디자인을 특징으로 하는 콘텐츠 표시 구성 요소입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
    <div class="mt-4">
      <img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
    </div>
    <div class="mt-4 flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
      <span class="text-gray-600 dark:text-gray-300">John Doe</span>
    </div>
  </div>
</div>

Content Display Components 컴포넌트

Tailwind CSS를 사용하여 마이크로 인터랙션, 반응형 디자인 및 어두운 테마를 지원하는 콘텐츠 표시 구성 요소입니다. 미묘한 Hover 효과를 제공하고 대화형 요소에 애니메이션을 집중시킵니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-sm mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <img class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" src="https://picsum.photos/600/400" alt="Placeholder image">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2 transform transition duration-500 hover:text-indigo-600 dark:hover:text-indigo-400">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4 transform transition duration-500 hover:translate-x-1">This is a description of the content. It is responsive and supports dark theme.</p>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 transform transition duration-500 hover:rotate-6" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of the author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none transform transition duration-500 hover:underline">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">7 min read</p>
          </div>
        </div>
        <button class="px-3 py-1 bg-indigo-500 text-white text-xs font-bold rounded hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-opacity-50 transform transition duration-500 hover:-translate-y-1">Read More</button>
      </div>
    </div>
  </div>
</div>

Content Display 구성 요소

레트로 디자인의 향수를 불러일으키는 디스플레이 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

열다 미리 보기

                <div class="max-w-xs mx-auto bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:border-gray-700">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Nostalgic Image">
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
            <div class="ml-3">
                <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Retro Nostalgia</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the vibrant designs of the 80s and 90s that inspired our modern aesthetics.</p>
            </div>
        </div>
        <div class="mt-4">
            <h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Join the Movement</h3>
            <p class="text-gray-500 dark:text-gray-400">Be part of our journey as we explore retro designs, culture, and style.
            </p>
        </div>
        <div class="flex justify-between mt-4">
            <span class="text-gray-600 dark:text-gray-400">#Retro #Vintage</span>
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Learn More</button>
        </div>
    </div>
</div>

Content Display 구성 요소

반응형 콘텐츠 표시 구성 요소로, 사용자 작업에 초점을 맞춘 매력적인 애니메이션과 마이크로 상호 작용을 통합합니다. 여기에는 다크 모드에 대한 지원과 이미지 및 아바타에 대한 자리 표시자가 포함됩니다.

열다 미리 보기

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <div class="p-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
        <p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
        <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
    </div>
</div>

콘텐츠 표시 구성 요소 구성 요소 11

80년대/90년대의 향수를 불러일으키는 디자인을 특징으로 하는 레트로/빈티지 스타일의 콘텐츠 디스플레이 구성 요소로, 반응형 효과와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="flex flex-col md:flex-row items-center p-6">
        <img class="w-full md:w-1/3 h-auto rounded-lg mb-4 md:mb-0" src="https://picsum.photos/300/200?random=1" alt="Random retro image">
        <div class="md:ml-4">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Retro/Vintage Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-2">This is a nostalgic description that evokes the design style of the 80s and 90s, full of vibrant colors and retro aesthetics.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">Posted by <span class="font-bold">User Name</span></span>
            </div>
        </div>
    </div>
    <div class="p-6">
        <p class="text-gray-700 dark:text-gray-300">Here’s a bit more detail about the content. This section can be used to provide additional context or information.</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 text-right">
        <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Read More</button>
    </div>
</div>