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

関連コンポーネント

Authentication_Components_Component

Tailwind CSSを使用したマイクロインタラクション、補色配色、ダークテーマのサポートを備えたソーシャルメディア用のシンプルで応答性の高い認証コンポーネント。

開ける

認証コンポーネント

ダークテーマをサポートするログインフォームとサインアップフォーム、レスポンシブデザイン、プレースホルダー画像を備えた最小限の認証コンポーネント。

開ける

ArtDecoAuthコンポーネント

アールデコ調のヘルスケア/医療アプリケーション向けの認証コンポーネントで、幾何学模様、高コントラストの色、ダークモードサポートによる完全な応答性を特長としています。ログインまたは登録フォームに適しています。

開ける