CCHub Logo CCHub Tailwind Collection
구성 요소 레이아웃 구성 요소 3D 레이아웃 구성 요소

3D 레이아웃 구성 요소

반응형 3D 디자인 소셜 미디어 레이아웃 구성 요소로, 회색조 색 구성표를 특징으로 합니다. 소셜 네트워킹 인터페이스에 적합합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
        <h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">  
    </div>
    <div class="text-gray-600 dark:text-gray-300">
        <p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
    </div>
</div>

관련 구성 요소

다크 모드 레이아웃 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 레이아웃 구성 요소입니다. 간단한 머리글, 콘텐츠 영역 및 바닥글이 특징입니다. 다크 모드는 Tailwind 클래스의 'dark:' 접두사에 의해 처리됩니다.

열다

Layout Components 컴포넌트

실제 세계를 모방한 스큐어모픽 스타일로 디자인된 레이아웃 구성 요소로, Tailwind CSS를 사용하여 반응형 요소와 어두운 테마를 지원합니다.

열다

레이아웃 구성 요소 구성 요소 40

매력적인 애니메이션과 함께 미시적 상호 작용을 특징으로 하는 반응형 레이아웃 구성 요소입니다. 여기에는 호버 효과, 크기 조정 및 어두운 테마 조정과 같은 사용자 상호 작용이 있는 카드 구조가 포함됩니다.

열다