検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

ユーザープロファイルコンポーネント

パステルカラーの配色と適度な複雑さの機能を持つダークモードダッシュボード用に設計されたユーザープロファイルコンポーネント。

                <div class="bg-gray-900 text-gray-300 p-6 rounded-lg shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-center">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">John Doe</h3>
            <p class="text-center">Software Developer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Jane Smith</h3>
            <p class="text-center">Product Manager</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Michael Johnson</h3>
            <p class="text-center">UX Designer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- Add more user profiles as needed -->
    </div>
</div>

ユーザーメンションコンポーネント

レトロ/ビンテージスタイルと類似の配色でデザインされたレスポンシブなユーザーメンションコンポーネントで、ダークモードをサポートします。ソーシャルメディアインターフェースに適したユーザーのアバター、名前、メッセージテキストを備えています。

開けるプレビュー

                <div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">John Doe</span>
            <p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Jane Smith</span>
            <p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Michael Brown</span>
            <p class="text-gray-700 dark:text-gray-400">Started following you</p>
        </div>
    </div>
</div>

Glassmorphism 検索ボックスコンポーネント

パステルカラーを使用したすりガラス効果(glassmorphism)を備えた最新の検索ボックスコンポーネント。コンポーネントはシンプルですがエレガントで、プロのビジネスWebサイト向けに設計されています。微妙なぼかし効果を備えた半透明の背景、レスポンシブデザイン、ダークモードのサポートが特徴です。検索ボックスには、検索アイコンと、企業環境に適したクリーンな入力フィールドが含まれています。

開けるプレビュー

                <!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
  <!-- Search Container with Glassmorphism Effect -->
  <div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
    <!-- Search Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
    
    <!-- Search Input -->
    <input 
      type="text" 
      placeholder="Search..." 
      class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
    >
    
    <!-- Optional Clear Button -->
    <button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
  
  <!-- Optional Hint Text -->
  <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
    Search for products, services, or information
  </div>
</div>

レトロ/ビンテージの80年代/90年代の美学を備えたレスポンシブなソーシャルメディアポストカードコンポーネントで、フューシャのアクセントが付いた類似の配色(スカイ、ティール、パープル)を使用しています。ダークモードのサポートとインタラクティブなホバー効果を備えています。コンテンツには、ユーザーのアバター、ユーザー名、タイムスタンプ、テキスト投稿、画像、アクションボタン(コメント、シェアなど)が含まれます。Tailwind CSSで構築されています。

開けるプレビュー

                <div class="min-h-screen bg-stone-200 dark:bg-slate-900 py-8 flex items-center justify-center">
  <div class="max-w-xl w-full mx-auto p-1 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-cyan-500 rounded-xl shadow-2xl">
    <div class="bg-stone-100 dark:bg-slate-800 rounded-lg p-6">
      <!-- Header -->
      <div class="flex items-center space-x-4 mb-6 pb-4 border-b-2 border-dashed border-sky-300 dark:border-sky-700">
        <img class="w-16 h-16 rounded-full border-4 border-fuchsia-500 dark:border-fuchsia-400 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-xl font-bold text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">RetroGal92</p>
          <p class="text-sm text-slate-500 dark:text-slate-400">Posted 2 hours ago</p>
        </div>
        <div class="ml-auto">
           <svg class="w-6 h-6 text-slate-500 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-300 cursor-pointer transition-colors duration-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="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </div>
      </div>

      <!-- Content -->
      <div class="mb-6">
        <p class="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
          Just vibin' with these retro tunes! <span class="text-2xl">🎧</span> Anyone else remember mixtapes and oversized headphones? Good times! <span class="text-yellow-400">✨</span>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#RetroLife</a>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#90sKid</a>
        </p>
        <img class="w-full h-auto rounded-lg shadow-lg border-2 border-teal-500 dark:border-teal-400 object-cover" src="https://picsum.photos/seed/retroscene1/600/400" alt="Retro Scene">
      </div>

      <!-- Actions -->
      <div class="flex items-center justify-between text-slate-600 dark:text-slate-300">
        <button class="flex items-center space-x-2 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors duration-200 group">
          <svg class="w-6 h-6 group-hover:fill-current transition-all duration-200" 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="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">1.2k Likes</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-sky-600 dark:hover:text-sky-400 transition-colors duration-200 group">
          <svg class="w-6 h-6" 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="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">87 Comments</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-teal-600 dark:hover:text-teal-400 transition-colors duration-200 group">
          <svg class="w-6 h-6" 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="2" d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4m0 0l-4 4m4-4v12"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">Share</span>
        </button>
      </div>
    </div>
  </div>
</div>

トップに戻るボタン

マイクロインタラクション、アースカラーの配色、ビジネス/企業Webサイト向けのシンプルなレイアウトを備えたBack to Topボタンコンポーネント。Tailwind CSSを使用したダークモードサポートのレスポンシブデザイン

開けるプレビュー

                <!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

ローダーコンポーネント

ビジネス/企業Webサイトのインタラクティブ性に焦点を当てたブルータリズムスタイルで設計されたローダーコンポーネントで、類似の配色とダークモードをサポートするレスポンシブデザインが特徴です。このデザインは、ブルータリズムの大胆で生々しい美学を捉えたさまざまなローダーアニメーションを紹介しています。

開けるプレビュー

                <div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

2要素認証コンポーネント

ブルータリズムデザイン、トライアドカラースキーム、ダッシュボード用のダークテーマをサポートするレスポンシブ2要素認証コンポーネント。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-black">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 p-8 rounded-none shadow-2xl w-full max-w-md">
        <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white uppercase">Two-Factor Authentication</h2>
        <p class="mb-6 text-gray-700 dark:text-gray-300">Please enter the code sent to your device.</p>
        <div class="flex space-x-4 mb-6">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
        </div>
        <button class="w-full bg-red-500 dark:bg-red-700 text-white dark:text-black font-bold py-4 px-6 border-4 border-black dark:border-gray-700 rounded-none uppercase text-xl hover:bg-red-700 dark:hover:bg-red-600 transition duration-300">Verify Code</button>
        <p class="mt-6 text-center text-sm text-gray-700 dark:text-gray-300"><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a> or <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Use another method</a></p>
    </div>
</div>

プログレスバーコンポーネント

3D要素で設計されたレスポンシブプログレスバーコンポーネントで、eコマースに適した類似の配色を使用し、ダークモードをサポートしています

開けるプレビュー

                <div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

マテリアルEarthToneLoginSignupComponent

アースカラーの配色、フォーム間のインタラクティブな切り替えによる適度な複雑さ、ダークモードをサポートするダッシュボード用に設計された、レスポンシブマテリアルデザインスタイルのログインおよびサインアップコンポーネント。

開けるプレビュー

                <!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Login / Signup Component</title>
    <script src='https://cdn.tailwindcss.com'></script>
  </head>
  <body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
    <div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
      <div class='hidden md:block'>
        <img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
      </div>
      <div class='p-8'>
        <input id='tabToggle' type='checkbox' class='peer sr-only' />
        <div class='flex justify-center mb-6 space-x-4'>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
        </div>
        <form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
          <div>
            <label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div>
            <label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
            <input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
        </form>
        <form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
              <input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
              <input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <div>
            <label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
              <input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
              <input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
        </form>
      </div>
    </div>
  </body>
</html>

登録フォーム-eコマース-追い風

レスポンシブモードとダークモードをサポートするTailwind CSSを使用したeコマース用のミニマリストフラットデザイン登録フォームコンポーネントで、補完的な青オレンジの配色が特徴です。

開けるプレビュー

                <!-- Registration Form Component -->
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-md bg-white dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Create Your Account</h2>
      <form action="#" method="POST" class="space-y-4">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
          <input type="text" id="full-name" name="fullname" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <input type="email" id="email" name="email" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <input type="password" id="password" name="password" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
          <input type="password" id="confirm-password" name="confirmPassword" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <button type="submit" class="w-full py-2 px-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500">
          Register
        </button>
      </form>
      <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500 font-medium">Log in</a>
      </p>
    </div>
  </div>
</div>

1 ... 147 148 149 150 151 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント

ユーザープロファイルコンポーネント

ユーザーメンションコンポーネント

Glassmorphism 検索ボックスコンポーネント

レトロなソーシャルメディアポストカード

トップに戻るボタン

ローダーコンポーネント

2要素認証コンポーネント

プログレスバーコンポーネント

マテリアルEarthToneLoginSignupComponent

登録フォーム-eコマース-追い風