구성 요소 레이아웃 구성 요소 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>

관련 구성 요소

Glassmorphism 사업 레이아웃

어스 톤을 특징으로 하는 Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 glassmorphism 레이아웃 구성 요소입니다.

열다

미니멀리스트 블로그 레이아웃 구성 요소

Minimalist Blog Layout Component with Monochromatic Color Scheme은 콘텐츠 소비를 위한 반응형 및 어두운 테마 지원을 제공합니다.

열다

레이아웃 구성 요소

블로그 및 콘텐츠 소비를 위해 설계된 복잡한 레이아웃 구성 요소로, 미시적 상호 작용과 보색 구성표를 특징으로 합니다. 여기에는 다양한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

열다