검색 구성 요소

카테고리

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

콘텐츠 표시 구성 요소

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

Content Display 구성 요소

3D 스타일의 콘텐츠 디스플레이 구성 요소로, 포트폴리오 작업 또는 제품을 회색 음영 색 구성표와 반응형 디자인으로 보여주며, 다크 모드 지원을 포함합니다.

                <div class="max-w-4xl mx-auto p-6">
    <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Showcase</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 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 5</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 6</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
    </div>
</div>

Content Display Components 컴포넌트

비즈니스/기업 웹 사이트에 대한 다크 모드를 지원하는 반응형 콘텐츠 디스플레이 구성 요소입니다.

열다 미리 보기

                <div class="dark:bg-gray-900 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="md:flex md:items-center md:justify-between">
      <div class="md:w-1/2">
        <h2 class="text-3xl font-bold mb-4">Our Mission</h2>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
      </div>
      <div class="md:w-1/2 mt-8 md:mt-0">
        <img src="https://images.unsplash.com/photo-1588702547930-db7c329119ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mission Image" class="rounded-lg shadow-lg">
      </div>
    </div>

    <div class="md:flex md:items-center md:justify-between mt-12">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Values Image" class="rounded-lg shadow-lg">
      </div>
      <div class="md:w-1/2 md:pl-8">
        <h2 class="text-3xl font-bold mb-4">Our Values</h2>
        <ul class="list-disc list-inside">
          <li class="mb-2">Integrity and Honesty</li>
          <li class="mb-2">Customer Focus</li>
          <li class="mb-2">Innovation and Excellence</li>
          <li class="mb-2">Teamwork and Collaboration</li>
        </ul>
      </div>
    </div>

    <div class="mt-12 text-center">
      <h2 class="text-3xl font-bold mb-6">What Our Clients Say</h2>
      <div class="md:flex md:-mx-4">
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">John Smith</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CEO, Company A</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Jane Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Marketing Director, Company B</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Peter Jones</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CTO, Company C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

콘텐츠 표시 구성 요소

전자 상거래를 위한 간단한 빈티지 스타일의 반응형 콘텐츠 디스플레이 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원합니다.

열다 미리 보기

                <div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg overflow-hidden shadow-lg">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-2">Vintage Product Title</h2>
        <p class="text-gray-300 dark:text-gray-400 mb-4">A brief description of the vintage product that evokes nostalgia from the 80s and 90s.</p>
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="text-sm">
                <p class="text-gray-100 dark:text-gray-200">Seller Name</p>
                <p class="text-gray-500 dark:text-gray-400">Seller Rating: ⭐⭐⭐⭐</p>
            </div>
        </div>
        <span class="text-lg font-semibold text-gray-100 dark:text-gray-200">$29.99</span>
        <div class="mt-4">
            <button class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
    </div>
</div>

Content Display Components 컴포넌트

Glassmorphism Content Display Component with Earth Tones

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <div class="bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 md:p-10">
      <div class="grid md:grid-cols-3 gap-8">
        <div class="md:col-span-2">
          <img src="https://picsum.photos/seed/content1/800/400" alt="Featured content image" class="rounded-lg shadow-md mb-6">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">The Beauty of Nature's Colors</h2>
          <div class="flex items-center text-gray-600 dark:text-gray-300 text-sm mb-6">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author avatar" class="w-8 h-8 rounded-full mr-3">
            <span>By John Doe</span>
            <span class="mx-3">&middot;</span>
            <span>October 26, 2023</span>
            <span class="mx-3">&middot;</span>
            <span>10 min read</span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
          <div class="flex flex-wrap gap-3">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Nature</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Earth Tones</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Design</span>
          </div>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Related Articles</h3>
          <ul class="space-y-4">
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related1/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">The Power of Natural Landscapes</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 20, 2023</p>
              </div>
            </li>
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related2/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">Bringing the Outdoors In</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 15, 2023</p>
              </div>
            </li>
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related3/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">Sustainable Living with Earth Tones</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 10, 2023</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

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>