CCHub Logo CCHub Tailwind Collection
구성 요소 인증 구성 요소 Skeuomorphic_Auth_CRM_Component

Skeuomorphic_Auth_CRM_Component

CRM/비즈니스 도구를 위한 복잡하고 반응이 빠른 인증 구성 요소로, 멋진 무채색과 다크 모드를 지원하는 스큐어모픽 디자인 스타일을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-md bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-xl border border-gray-200 dark:border-gray-700 p-8 sm:p-10 lg:p-12 transform perspective-1000 rotateX-5 overflow-hidden transition-all duration-500
      before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-gray-100 before:via-gray-50 before:to-transparent before:opacity-20 before:pointer-events-none before:z-0
      dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-transparent dark:before:opacity-30">

    <!-- Top Skeuomorphic Element -->
    <div class="absolute -top-6 -left-6 w-24 h-24 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>
    <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gradient-to-tl from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>

    <div class="relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 drop-shadow-md brightness-150" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9.22 17.53C8.618 18.132 8.618 19.102 9.22 19.704L14.77 25.254C15.372 25.856 16.342 25.856 16.944 25.254L22.494 19.704C23.096 19.102 23.096 18.132 22.494 17.53L21.964 17M15 15.75V9.75L15 6L18 3L21 6V9.75M9 15.75V9.75M3 15.75V9.75M12 15.75V9.75M6 15.75V9.75M12 6H15M6 6H9M18 9.75H21M3 9.75H6M9 9.75H12

관련 구성 요소

미니멀리스트 인증 양식

반응형, 미니멀리스트 로그인 양식 구성 요소는 포트폴리오 또는 웹 응용 프로그램을 위해 설계되었습니다. 보색이 돋보이는 플랫 디자인 미학이 특징입니다: 파란색은 밝은 모드에서 대화형 요소에 사용되고, 주황색은 어두운 모드에서 사용됩니다. 이 양식에는 이메일 및 비밀번호 필드, '비밀번호 찾기' 옵션, '비밀번호 찾기' 링크, 가입 옵션 및 소셜 로그인 통합(예: GitHub)이 포함됩니다. 어두운 테마를 지원하며 쉽게 통합할 수 있도록 HTML 및 Tailwind CSS로만 구축되었습니다.

열다

인증 구성 요소

전자 상거래를 위한 Neumorphism 스타일의 인증 구성 요소로, 트라이어딕 색 구성표와 간단한 레이아웃이 있습니다. 다크 모드를 지원하며 반응성이 뛰어납니다. Tailwind CSS를 사용합니다. 자바스크립트가 없습니다.

열다

Retro_Healthcare_Auth_Component

레트로/빈티지 디자인, 차분한 색 구성표, 다크 모드 지원을 포함하여 의료/의료 애플리케이션에 맞게 조정된 반응형 인증 구성 요소입니다.

열다