CCHub Logo CCHub Tailwind Collection
구성 요소 레이아웃 구성 요소 Glassmorphism 사업 레이아웃

Glassmorphism 사업 레이아웃

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

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 p-8 rounded-xl shadow-lg w-4/5 md:w-2/3 lg:w-1/2 backdrop-filter backdrop-blur-lg">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Business Layout Component</h1>
    <p class="text-gray-600 dark:text-gray-300">This is a simple layout component showcasing glassmorphism with earth tones, suitable for business websites. It is responsive and supports dark mode.</p>
    <div class="mt-6 flex flex-col md:flex-row justify-between items-center">
      <div class="text-gray-700 dark:text-gray-200 mb-4 md:mb-0">
        <p>Contact Information:</p>
        <p>Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
    </div>
  </div>
</div>

관련 구성 요소

Glassmorphism 대시보드 레이아웃

사이드바, 기본 콘텐츠 영역, 여러 반투명 패널이 있는 복잡한 트라이어딕 색상의 glassmorphism 대시보드 레이아웃 구성 요소로, 완벽하게 반응하고 다크 모드를 지원합니다. 데이터 시각화 및 제어판을 위해 설계되었습니다.

열다

Memphis_Grayscale_Photography_Layout

Memphis Design에서 영감을 받은 회색조의 복잡하고 반응이 빠른 사진 레이아웃 구성 요소로, 사진 갤러리 및 포트폴리오에 적합하며 다크 모드를 지원합니다.

열다

소셜 미디어 레이아웃 구성 요소

Tailwind CSS를 사용하여 생생한 색상과 어두운 테마를 지원하는 반응형의 복잡한 3D 스타일 소셜 미디어 레이아웃 구성 요소입니다. 여기에는 로고와 탐색이 있는 헤더, 게시물에 대한 동적 카드가 있는 기본 콘텐츠 영역, 사용자 프로필 및 인기 주제에 대한 사이드바가 포함됩니다. 각 요소는 깊이와 상호 작용 느낌을 줄 수 있도록 스타일이 지정되어 있습니다.

열다