CCHub Logo CCHub Tailwind Collection
구성 요소 기능적 구성 요소 Functional Components 구성 요소

Functional Components 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 glassmorphism 디자인 스타일을 특징으로 하는 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex flex-row items-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            Passionate about building intuitive and dynamic user experiences. I love coding and design.
        </p>
        <img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Contact Me</button>
    </div>
</div>
<style>
    /* Dark Mode CSS */
    @media (prefers-color-scheme: dark) {
        .bg-opacity-30 {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
</style>

관련 구성 요소

Functional Components 구성 요소

Material Design 원칙, 유사한 색 구성표 및 적당한 복잡성을 사용하는 기능적 구성 요소가 있는 대시보드 구성 요소입니다. 이 구성 요소에는 Tailwind CSS를 사용하는 반응형 디자인 및 어두운 테마 지원이 포함됩니다. JavaScript는 포함되어 있지 않습니다.

열다

블로그 기능 구성 요소

기능적 구성 요소 3D 디자인의 구성 요소, 보색 구성표, 블로그의 중간 정도의 복잡성, 어두운 테마 지원으로 반응 형. JS는 없고 HTML과 Tailwind만 있습니다.

열다

기능적 구성 요소 구성 요소 - Brutalism Style

Tailwind CSS를 사용하여 브루탈리즘 스타일로 설계된 기능적 웹 구성 요소입니다. 이 구성 요소는 고대비, 반응형 효과 및 어두운 테마 지원을 갖춘 대담한 레이아웃을 특징으로 합니다. 여기에는 시각적 호소력을 위한 자리 표시자 이미지와 아바타가 포함되어 있습니다.

열다