콘텐츠 표시 구성 요소

Content Display 구성 요소

대화형 요소로 포트폴리오 콘텐츠를 표시하기 위한 glassmorphism 스타일의 구성 요소로, 다크 모드를 지원합니다.

                <div class="flex flex-col items-center justify-center p-5 bg-gray-900 min-h-screen">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Portfolio Showcase</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Explore my recent work and projects in this beautifully designed portfolio section.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=1" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=2" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=3" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=4" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 4</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Content Display 구성 요소

미니멀하고 평면적인 디자인 스타일을 특징으로 하는 반응형 콘텐츠 표시 구성 요소로, 블로그 및 콘텐츠 소비에 이상적입니다. 그레이스케일 색 구성표를 가지고 있으며 다크 모드를 지원하는 동시에 대화형 요소를 갖추고 있습니다.

미리보기 열기

                <div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
        </div>
    </div>
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
    <img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
    <p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
    <a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>

블로그 또는 콘텐츠 소비를 위한 반응형 콘텐츠 표시 구성 요소로, 3D 디자인 스타일과 어두운 테마를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" />
        <div class="flex flex-col">
            <span class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">March 10, 2023</span>
        </div>
    </div>
    <h2 class="text-gray-900 dark:text-gray-100 text-xl font-bold mb-2">Exploring the Depths of 3D Design</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">Incorporating three-dimensional elements into design can create an engaging experience for users, making the content more appealing and enjoyable to consume. In this post, we explore various techniques...</p>
    <img src="https://picsum.photos/400/200?random=1" alt="3D Design Example" class="rounded-lg mb-4 shadow-md">
    <button class="bg-gray-800 dark:bg-gray-300 text-white dark:text-gray-800 px-4 py-2 rounded-md transition duration-300 hover:bg-gray-700 dark:hover:bg-gray-400">Read More</button>
</div>

Content Display 구성 요소

소셜 미디어 인터페이스를 위한 간단한 반응형 콘텐츠 표시 구성 요소로, 머티리얼 디자인 원칙과 트라이어딕 색 구성표로 설계되었습니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto my-8 overflow-hidden">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-gray-700 dark:text-gray-300">
            This is an example of a simple content display component in a social media context, showcasing the Material Design principles with a triadic color scheme.
        </p>
    </div>
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Content Image">
    <div class="p-4">
        <div class="flex justify-between items-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600">Like</button>
            <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-700 dark:hover:bg-green-600">Share</button>
        </div>
    </div>
</div>

콘텐츠 표시 구성 요소

그레이스케일 색 구성표와 반응형 디자인으로 작업 또는 제품을 선보이는 3D 디자인 포트폴리오로, 다크 모드를 지원합니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-10 flex flex-col items-center justify-center">
    <h1 class="text-3xl font-bold mb-5 text-gray-800 dark:text-gray-200">Portfolio</h1>
    <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 transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Artwork 1">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Artwork 2">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Artwork 3">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </div>
    <footer class="w-full text-center mt-10 text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your Name. All rights reserved.</p>
    </footer>
</div>

Content Display 구성 요소

단순하고 반응이 빠른 콘텐츠 디스플레이 구성 요소는 보색이 있는 브루탈리즘 스타일로 디자인되었습니다. 비즈니스/기업 웹사이트에 적합하며 다크 모드를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
    <h1 class="text-3xl font-bold mb-4">Company Title</h1>
    <img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
    <p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <div class="">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">CEO</p>
        </div>
    </div>
</div>

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>

카테고리

콘텐츠 표시 구성 요소