구성 요소 레이아웃 구성 요소 3D 레이아웃 구성 요소

3D 레이아웃 구성 요소

어두운 테마를 지원하는 생생한 색상을 사용하는 비즈니스/기업 웹 사이트를 위한 간단하고 반응이 빠르며 매력적인 3D 디자인 레이아웃입니다.

미리 보기

HTML 코드

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden md:flex md:flex-row">
    <div class="md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our Company</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">We provide innovative solutions to enhance your business.</p>
        <a href="#" class="bg-indigo-600 text-white rounded-lg px-4 py-2 hover:bg-indigo-700 transition duration-300 shadow-md transform hover:scale-105">Learn More</a>
    </div>
    <div class="md:w-1/2">
        <img src="https://picsum.photos/500/300" alt="Business Image" class="rounded-lg shadow-md w-full h-full object-cover" />
    </div>
</div>

<div class="flex justify-center mt-6">
    <div class="text-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Our Team</h3>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar 2" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar 3" class="rounded-full w-16 h-16 shadow-lg" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Meet our dedicated team of professionals.</p>
    </div>
</div>

관련 구성 요소

레이아웃 구성 요소

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

열다

포트폴리오 레이아웃

보색, 다크 모드 지원 및 최소 요소와의 미시적 상호 작용에 중점을 둔 포트폴리오를 위한 간단한 반응형 레이아웃 구성 요소입니다.

열다

Layout Components 컴포넌트

사용자 작업에 응답하는 매력적인 애니메이션을 통해 마이크로 인터랙션을 보여주는 반응형 레이아웃 구성 요소로, 다크 모드를 지원하고 Tailwind CSS를 활용합니다.

열다