360° 뷰어 구성 요소
브루탈리즘 스타일로 디자인된 360° 뷰어 구성 요소로, 높은 대비와 특이한 레이아웃을 특징으로 하며 어두운 테마와 반응형 디자인 효과를 지원합니다.
HTML 코드
<div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg flex flex-col items-center">
<h2 class="text-3xl font-bold mb-6">360° Viewer</h2>
<p class="text-lg mb-4">Explore the 360° view of the object.</p>
<div class="w-full h-64 border-4 border-white overflow-hidden rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/600/400?random=1" alt="360 View" class="transform duration-500 hover:scale-105"/>
</div>
<div class="mt-6 flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
</div>
</div>관련 구성 요소
360 Viewer 구성 요소
Tailwind CSS로 구축된 다크 모드 지원 및 반응형 디자인을 갖춘 360° 뷰어 구성 요소입니다. JavaScript가 필요하지 않으며 스타일링 및 응답성을 위해 CSS만 사용합니다.
360 Viewer 구성 요소
Tailwind CSS를 사용하여 뉴모픽 디자인, 반응형 효과 및 어두운 테마를 지원하는 360° 뷰어 구성 요소입니다. 미묘한 그림자와 둥근 모서리가 있는 컨테이너, 이미지 플레이스홀더, 뉴모픽 효과로 스타일링된 탐색 화살표가 특징입니다.