CCHub Logo CCHub Tailwind Collection
コンポーネント 認証コンポーネント Skeuomorphic_Auth_CRM_Component

Skeuomorphic_Auth_CRM_Component

CRM/Business Tools用の複雑で応答性の高い認証コンポーネントで、クールなニュートラルカラーとダークモードのサポートを備えたスキューモーフィックなデザインスタイルが特徴です。

プレビュー

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

関連コンポーネント

Auth_Component_Watercolor_Artistic

シンプルで応答性の高い認証コンポーネントで、柔らかく水彩画/芸術的な美学で設計されています。温かみのあるニュートラルカラーとダークモードのサポートが特徴で、イベントや会議のWebサイトに適しています。

開ける

3D_Auth_Agriculture_Simple

3Dデザインの美学と高コントラストの配色を備えたシンプルでレスポンシブな認証コンポーネントで、農業/農業のWebサイトに適しています。ダークモードのサポートを備えています。

開ける

認証コンポーネント

Neumorphismスタイルと単色の配色で設計されたシンプルな認証コンポーネントで、ソーシャルメディアインターフェイスに適しています。これには、電子メールとパスワードのフィールドを備えたログインフォーム、ログインボタン、およびサインアップリンクが含まれています。このコンポーネントは応答性が高く、ダークモードをサポートしています。

開ける