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>

관련 구성 요소

3D 레이아웃 구성 요소

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

열다

3D 디자인을 사용한 전자 상거래 레이아웃

3D 디자인 요소가 포함된 전자 상거래를 위한 반응형 웹 구성 요소 레이아웃으로, 보색 구성표와 어두운 테마 지원을 통합합니다. 제품 카드, 탐색 모음 및 바닥글이 있으며 모두 Tailwind CSS로 스타일이 지정되었습니다.

열다

3D 레이아웃 구성 요소

매력적인 비주얼을 갖춘 반응형 3D 디자인 레이아웃 구성 요소로, 그림자와 레이어를 통해 깊이를 통합합니다. 다크 모드 지원이 포함되며 임의의 이미지와 아바타가 있습니다.

열다