検索コンポーネント

すべてのコンポーネント

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

トップに戻るボタンコンポーネント

マイクロインタラクションと鮮やかな色でデザインされたレスポンシブバック・トゥ・トップ・ボタンは、ダークモードをサポートするダッシュボードインターフェースに適しています。

                <div class="fixed bottom-4 right-4">
    <button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full p-3 shadow-lg hover:scale-110 transition-transform duration-300 dark:from-purple-800 dark:to-pink-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m0 0l-4-4m4 4l4-4" />
        </svg>
    </button>
</div>

Glassmorphism タブコンポーネント

ソーシャルメディアインターフェース用に設計された、glassmorphismスタイルのレスポンシブタブコンポーネント。グレースケールの配色でTailwind CSSを使用したすりガラスのような効果が特徴です。このデザインはダークモードをサポートしています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800">
    <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-lg shadow-lg p-5 w-full max-w-md">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Social Media Tabs</h2>
        <div class="flex justify-around mb-4">
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab1">Tab 1</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab2">Tab 2</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab3">Tab 3</button>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div id="content-tab1" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 1 Content</h3>
                <p>Welcome to Tab 1! This is where content for the first tab goes.</p>
                <img src="https://picsum.photos/200?random=1" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 1</span>
                </div>
            </div>
            <div id="content-tab2" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 2 Content</h3>
                <p>Welcome to Tab 2! This is where content for the second tab goes.</p>
                <img src="https://picsum.photos/200?random=2" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 2</span>
                </div>
            </div>
            <div id="content-tab3" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 3 Content</h3>
                <p>Welcome to Tab 3! This is where content for the third tab goes.</p>
                <img src="https://picsum.photos/200?random=3" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 3</span>
                </div>
            </div>
        </div>
    </div>
</div>

スキューモーフィズムSuccessMessage

Skeuomorphism Success Message for Dashboard, Complex with Complementary Colors and Dark Mode

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-2xl w-full max-w-md border border-gray-200 dark:border-gray-700 relative overflow-hidden">
    <!-- Skeuomorphic header - subtle gradient and border -->
    <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-green-400 to-green-500 dark:from-green-600 dark:to-green-700 rounded-t-lg border-b border-green-600 dark:border-green-800"></div>
    
    <!-- Content Area with subtle inner shadow -->
    <div class="relative z-10 pt-4">
      <div class="text-center mb-8">
        <!-- Skeuomorphic Icon - Embossed look -->
        <div class="mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-inner mb-4">
          <svg class="w-10 h-10 text-green-500 dark:text-green-300" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Success!</h2>
        <p class="text-gray-600 dark:text-gray-400">Your operation was completed successfully.</p>
      </div>

      <!-- Detail Section - Elevated and Grouped -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 shadow-md border border-gray-100 dark:border-gray-600">
        <div class="flex justify-between items-center mb-4">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Transaction ID:</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">#XYZ123456789</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Status:</span>
          <span class="text-sm text-green-600 dark:text-green-400 font-semibold">Completed</span>
        </div>
      </div>

      <!-- Action Buttons - Bevel effect -->
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-blue-700 dark:border-blue-800 hover:translate-y-1 hover:shadow-xl">
          View Details
        </button>
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-gray-500 dark:border-gray-600 hover:translate-y-1 hover:shadow-xl dark:bg-gray-600 dark:text-gray-200">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

RetroBlogレイアウト

レトロ/ビンテージの美学、ダークモードのサポート、およびTailwind CSSで構築された補色の配色を備えた、シンプルでレスポンシブなブログレイアウト。

開けるプレビュー

                <div class="min-h-screen bg-gray-200 font-sans text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <header class="bg-blue-600 py-4 shadow-md dark:bg-blue-800">
    <div class="container mx-auto px-4">
      <h1 class="text-center text-3xl font-bold text-white">RetroBlog</h1>
    </div>
  </header>

  <main class="container mx-auto p-4">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
      <!-- Main Content Area -->
      <section class="md:col-span-2">
        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Blog Post Title</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 27, 2023</p>
          <img src="https://picsum.photos/seed/retro1/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </article>

        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Another Blog Post</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
          <img src="https://picsum.photos/seed/retro2/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>
      </section>

      <!-- Sidebar -->
      <aside>
        <div class="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">About</h3>
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="mb-4 w-16 h-16 rounded-full mx-auto">
          <p class="text-gray-700 text-center dark:text-gray-300">A passionate writer sharing thoughts and ideas on various topics.</p>
        </div>

        <div class="mt-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">Categories</h3>
          <ul>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Technology</a></li>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Lifestyle</a></li>
            <li><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Travel</a></li>
          </ul>
        </div>
      </aside>
    </div>
  </main>

  <footer class="bg-gray-700 py-4 text-center text-white dark:bg-gray-900">
    <p>&copy; 2023 RetroBlog. All rights reserved.</p>
  </footer>
</div>

ミニマリストログインフォーム

レスポンシブデザインとダークモードをサポートする、eコマースサイト用のミニマリストログインフォーム。類似の配色を使用します。JavaScript はありません。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Login</h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded dark:text-indigo-500 dark:border-gray-600 dark:bg-gray-700 focus:ring-indigo-500">
          <label for="remember-me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-600">
          Sign in
        </button>
      </div>
    </form>
    <div class="text-sm text-center">
      <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Sign up</a></p>
    </div>
  </div>
</div>

二要素認証

ブルータリズムデザイン、補色配色、ソーシャルメディア向けの適度な複雑さを備えた2要素認証コンポーネントで、ダークテーマをサポートしたレスポンシブ。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-yellow-200 dark:bg-purple-800 p-6">
  <div class="bg-white dark:bg-gray-900 border-4 border-black dark:border-yellow-400 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#darpurple-400] p-8 rounded-none max-w-sm w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center font-mono">Verify Your Identity</h2>
    <p class="text-black dark:text-gray-300 mb-6 text-center font-sans">and enter the verification code sent to your phone number.</p>
    <div class="flex justify-center space-x-4 mb-6">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
    </div>
    <button class="w-full bg-purple-500 dark:bg-yellow-400 text-white dark:text-black font-bold py-3 border-4 border-black dark:border-yellow-400 shadow-[5px_5px_0_0_#000] dark:shadow-[5px_5px_0_0_#darpurple-400] hover:bg-purple-600 dark:hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">Verify</button>
    <p class="mt-4 text-center text-black dark:text-gray-300 font-sans">
      Didn't receive a code? <a href="#" class="text-purple-600 dark:text-yellow-400 hover:underline font-mono">Resend Code</a>
    </p>
  </div>
</div>

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

ブルータリズムスタイルでデザインされ、パステルカラーの配色で、ソーシャルメディアインターフェース用に調整された複雑な検索ボックスコンポーネント。このコンポーネントには、検索入力、フィルター、送信ボタンなどのインタラクティブな要素が含まれており、すべてダークモードをサポートしています。

開けるプレビュー

                <div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
    <form class="flex flex-col space-y-4">
        <input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
        <div class="flex flex-wrap justify-between">  
            <select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
                <option value="all">All</option>
                <option value="images">Images</option>
                <option value="videos">Videos</option>
                <option value="users">Users</option>
            </select>
            <button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
                <svg class="w-5 h-5 mr-2" 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="M21 21l-6-6m2-4a9 9 0 10-6 0 9 9 0 006 0z" />
                </svg>
                Search
            </button>
        </div>
    </form>
    <div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
        <h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
        <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User1</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User2</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User3</span>
        </div>
    </div>
</div>

ソーシャルログインコンポーネント

Glassmorphismスタイル、鮮やかな色、ダークテーマのサポートを備えたレスポンシブソーシャルログインコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg w-full max-w-md">
    <div class="mb-8 text-center">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300">Connect with your social media accounts</p>
    </div>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.846 17.01h-2.192v-5.535h2.192v5.535zm-1.098-6.814h-2.192V6.66h2.192v3.536zM12 2a10 10 0 0 1 10 10 9.93 9.93 0 0 1-.868 4.463l-4.406-4.406A2.99 2.99 0 0 0 12 8c-1.657 0-3 1.343-3 3v4H6V9h3V6h3v3h3v2h-3v6.01z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.675 0h-21.35C.595 0 0 .595 0 1.325v21.351C0 23.405.596 24 1.325 24h11.08C13.105 24 13.5 23.604 13.5 23.125V16.3h2.451l.368-2.848h-2.819l.001-1.404c0-.816.227-1.374 1.397-1.374h1.497V7.328c-.269-.036-1.13-.105-2.14-.105-2.114 0-3.564 1.29-3.564 3.659v1.998H8.39v2.848h2.407v6.822c-.7-.052-1.388-.181-2.045-.372H1.325C.595 22.675 0 22.08 0 21.35v-21.35C0 .595.596 0 1.325 0h21.35z"/>
        </svg>
        Sign in with Facebook
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M23.954 4.569a8.005 8.005 0 0 1-2.277.623A4.006 4.006 0 0 0 23.622 2.34c-.843.5-1.786.879-2.775 1.08a4.006 4.006 0 0 0-6.81-.878 4.007 4.007 0 0 0-1.122 3.163A11.372 11.372 0 0 1 1.466 2.977a4.007 4.007 0 0 0 1.242 5.332 3.988 3.988 0 0 1-1.81-.5V9.22c0 1.958 1.395 3.598 3.243 3.97V13.42c-1.18.323-2.44.495-3.795.493-.542-.002-1.073-.032-1.594-.098S.945 13.785 0 13.89c1.832 1.16 4.002 1.855 6.33 1.84A11.372 11.372 0 0 1 0 14.55c1.923 2.196 4.551 3.702 7.588 3.814a11.372 11.372 0 0 1-6.29 1.84c-.405 0-.8-.025-1.194-.072C1.915 21.113 4.523 22 7.393 22 12.266 22 18 18.926 18 12.283c0-.1-.002-.198-.006-.296A8.006 8.006 0 0 0 23.954 4.57z"/>
        </svg>
        Sign in with Twitter
      </button>
    </div>
  </div>
</div>

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

ブログやコンテンツの消費用に設計されたシンプルなレトロ/ビンテージスタイルの検索ボックスコンポーネント。単色の配色を使用し、ダークテーマのサポートでレスポンシブです。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
            <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                <button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

ソーシャルメディア用のレトロビンテージCAPTCHA

ソーシャルメディア用のレトロビンテージCAPTCHAコンポーネントで、鮮やかな色、適度な複雑さ、応答性、Tailwind CSSを使用したダークモードのサポートを備えています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-xl max-w-sm w-full border-4 border-indigo-600 dark:border-indigo-400 transform rotate-1 skew-y-1">
    <h2 class="text-3xl font-bold mb-6 text-center text-gray-800 dark:text-white font-mono tracking-wider">Verify You Are Human</h2>
    
    <!-- CAPTCHA Image/Challenge Area -->
    <div class="relative mb-6">
      <img src="https://picsum.photos/400/150?random=1" alt="CAPTCHA Challenge" class="w-full h-40 object-cover rounded border-2 border-yellow-400 transform -rotate-2">
      <div class="absolute inset-0 bg-black opacity-25"></div>
      <div class="absolute inset-0 flex items-center justify-center text-white text-2xl font-bold font-mono">
        kS7p#aG9
      </div>
    </div>
    
    <!-- Input Field -->
    <div class="mb-6">
      <label for="captcha" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 font-mono">
        Enter the characters you see:
      </label>
      <input type="text" id="captcha" class="shadow appearance-none border-2 border-green-500 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-800 leading-tight focus:outline-none focus:ring-4 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-300 font-mono transform skew-x-2">
    </div>
    
    <!-- Reload and Audio Buttons -->
    <div class="flex justify-between mb-6">
      <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Reload
      </button>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Audio
      </button>
    </div>
    
    <!-- Submit Button -->
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded w-full focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
      Verify
    </button>
  </div>
</div>

1 ... 162 163 164 165 166 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント