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