検索コンポーネント

すべてのコンポーネント

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

カルーセルスライダーコンポーネント

Tailwind CSS を使用して「ポートフォリオ - 作品や製品を展示する」という目的のために、デザインスタイル「Neumorphism - 微妙な影を使用して背景から押し出されるように見える要素を作成するソフト UI スタイル」と、カラースキーム「Complementary - Color Wheel 上で互いに反対の色」と複雑度レベルの「Complex - Rich interface with multiple interactive elements」を使用して、Web コンポーネント Carousel Slider コンポーネントを実装します。ダークテーマをサポートするレスポンシブデザインを作成します。JavaScript コードは必要なく、Tailwind クラスを含む HTML のみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像が必要な場合は、画像には picsum.photos を、アバターには randomuser.me を使用します。

開けるプレビュー

                <section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center max-w-screen-lg">
        <div class="flex items-center justify-center w-full h-auto">
            <div class="w-full h-full carousel">
                <div class="carousel-inner">
                    <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label for="carousel-3" class="carousel-control prev control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" 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="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control next control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" 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 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control prev control-2">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" 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="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-3" class="carousel-control next control-2">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" 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 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control prev control-3">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" 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="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control next control-3">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" 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 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                </div>
            </div>
        </div>
    </div>
  <style>
    .carousel-open:checked + .carousel-item {
      position: static;
      opacity: 100;
    }

    .carousel-item {
      -webkit-transition: opacity 0.6s ease-out;
      transition: opacity 0.6s ease-out;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .carousel-open:checked ~ .carousel-item:not(.carousel-item) {
      opacity: 0;
    }


    .carousel-open:checked ~ .control-1,
    .carousel-open:checked ~ .control-2,
    .carousel-open:checked ~ .control-3 {
      display: flex;
    }

    .carousel-control {
      z-index: 1;      
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10%;
      cursor: pointer;
      opacity: 50%;
      transition: opacity 150ms ease-in-out;
    }


    .carousel-control:hover {
      opacity: 100%;
    }

    .control-1,
    .control-2,
    .control-3 {
      width: 5vh;
      height: 5vh;
      border-radius: 50%;
      position: absolute;
    }
  
     .control-1 {
        top: 45%;
        left: 5%;
      }

      .control-2 {
        top: 45%;
        right: 5%;
      }
  
      .control-3 {
        top: 45%;
        left: 5%;
    }
  </style>
</section>

製品カードコンポーネント

マイクロインタラクションを備えたレスポンシブ製品カードコンポーネントで、グレースケールの配色を利用し、ダークモードをサポートします。ブログやコンテンツの消費目的に最適です。

開けるプレビュー

                <div class="flex flex-wrap justify-center p-4">
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
</div>

フィードバックコンポーネント

鮮やかな色のダークモード用に設計されたレスポンシブフィードバックコンポーネントで、ブログやコンテンツの消費に最適です。

開けるプレビュー

                <div class="max-w-3xl mx-auto p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-white mb-4">Feedback</h2>
    <div class="mb-4">
        <textarea class="w-full p-3 bg-gray-700 dark:bg-gray-800 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500" rows="4" placeholder="Leave your feedback here..."></textarea>
    </div>
    <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <span class="text-white font-medium">John Doe</span>
    </div>
    <div class="flex justify-between">
        <button class="px-4 py-2 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500">Submit</button>
        <button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
    </div>
</div>

<div class="max-w-3xl mx-auto mt-8 p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <h3 class="text-xl font-bold text-white mb-4">Previous Feedback</h3>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div class="flex-1">
            <p class="text-white">Amazing content! I loved the insights shared in this article.</p>
            <span class="text-gray-400 text-sm">Posted on Nov 12, 2023</span>
        </div>
    </div>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div class="flex-1">
            <p class="text-white">Great reading experience. Looking forward to more articles!</p>
            <span class="text-gray-400 text-sm">Posted on Nov 11, 2023</span>
        </div>
    </div>
</div>

コンテンツ表示コンポーネント

3Dデザインスタイルとダークテーマのサポートを備えた、ブログやコンテンツ消費用のレスポンシブコンテンツ表示コンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" />
        <div class="flex flex-col">
            <span class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">March 10, 2023</span>
        </div>
    </div>
    <h2 class="text-gray-900 dark:text-gray-100 text-xl font-bold mb-2">Exploring the Depths of 3D Design</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">Incorporating three-dimensional elements into design can create an engaging experience for users, making the content more appealing and enjoyable to consume. In this post, we explore various techniques...</p>
    <img src="https://picsum.photos/400/200?random=1" alt="3D Design Example" class="rounded-lg mb-4 shadow-md">
    <button class="bg-gray-800 dark:bg-gray-300 text-white dark:text-gray-800 px-4 py-2 rounded-md transition duration-300 hover:bg-gray-700 dark:hover:bg-gray-400">Read More</button>
</div>

ニューモーフィズムアースフッター

ニューモーフィズム、アーストーン、ダークテーマをサポートするレスポンシブフッターコンポーネント

開けるプレビュー

                ```html
<footer class="bg-stone-100 dark:bg-stone-900 shadow-neumorphism-light dark:shadow-neumorphism-dark mt-12">
  <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
    <div class="text-center text-stone-700 dark:text-stone-300">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</footer>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #bdae9d, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #1e1e1e, -5px -5px 10px #2e2e2e;
}
</style>
```

アラートメッセージコンポーネント

ダークモードをサポートするソーシャルメディア用のレトロ/ビンテージグレースケールアラートメッセージコンポーネント

開けるプレビュー

                <div class="flex flex-col space-y-4 p-4 bg-gray-100 dark:bg-gray-800">

  <!-- Success Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
      <p class="text-sm font-mono">Success: Your post was published.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

  <!-- Info Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p class="text-sm font-mono">Info: New messages available.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

  <!-- Warning Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
      <p class="text-sm font-mono">Warning: Profile incomplete.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

  <!-- Danger Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p class="text-sm font-mono">Error: Failed to send message.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

</div>

レトロダッシュボードログイン/サインアップ

ダッシュボードのレトロ/ビンテージをテーマにしたログインおよびサインアップコンポーネントで、複雑なレイアウトとトライアドカラースキームを備えています。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-amber-200 via-red-400 to-rose-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md filter drop-shadow-lg transform rotate-2 transition duration-500 hover:rotate-0">
    <div class="mb-8 text-center">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white font-mono">Dashboard Access</h2>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your credentials to dive in!</p>
    </div>

    <div class="tabs">
      <input type="radio" name="tabs" id="login" checked class="hidden">
      <label for="login" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Login</label>

      <input type="radio" name="tabs" id="signup" class="hidden">
      <label for="signup" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Sign Up</label>

      <div id="tab-content-login" class="mt-8 tab-content">
        <form>
          <div class="mb-5">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
            <input type="email" id="email" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
          <div class="mb-5">
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
            <input type="password" id="password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
              <input type="checkbox" id="remember" class="form-checkbox h-4 w-4 text-rose-600 dark:text-rose-400 rounded">
              <label for="remember" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">Remember me</label>
            </div>
            <a href="#" class="text-sm text-rose-600 dark:text-rose-400 hover:underline">Forgot Password?</a>
          </div>
          <button type="submit" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded-md transition duration-300">Login</button>
        </form>
      </div>

      <div id="tab-content-signup" class="mt-8 tab-content hidden">
        <form>
           <div class="mb-5">
            <label for="new-email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
            <input type="email" id="new-email" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
           <div class="mb-5">
            <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
            <input type="password" id="new-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
           <div class="mb-5">
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <button type="submit" class="w-full bg-amber-400 hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition duration-300">Sign Up</button>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic tab functionality (can be improved with JS) */
  .tabs input:checked + .tab-label {
    border-color: #f43f5e; /* rose-500 */
  }

  .tabs input:checked ~ .tab-content {
    display: block;
  }

  /* Hide inactive tab content */
  .tab-content {
    display: none;
  }
</style>

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

3Dデザイン要素とトライアドカラースキームを備えたレスポンシブな2要素認証コンポーネントで、ブログやコンテンツサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg relative transform transition-all duration-300 hover:scale-105" style="transform-style: preserve-3d;">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-50 rounded-lg" style="transform: translateZ(-10px);"></div>
    <h2 class="text-2xl font-bold text-center mb-6 text-gray-800 dark:text-white">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the 6-digit code sent to your device.</p>
    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-300">Verify Code</button>
    <p class="text-center text-gray-600 dark:text-gray-300 mt-4 text-sm">Didn't receive a code? <a href="#" class="text-blue-600 hover:underline">Resend</a></p>
  </div>
</div>

サイトマップコンポーネント

鮮やかな色とマイクロインタラクション、ダークモードのサポートを備えた、eコマースサイト向けのシンプルでレスポンシブなサイトマップコンポーネント。

開けるプレビュー

                <div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 py-12 px-6">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold text-center mb-8">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">All Products</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Categories</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Sale Items</a></li>
        </ul>
      </div>
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Returns & Exchanges</a></li>
        </ul>
      </div>
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Careers</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
        </ul>
      </div>
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Follow Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Facebook</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Instagram</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Twitter</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

ビデオプレーヤーコンポーネント

ソーシャルメディアインターフェイス用に設計されたミニマリストのビデオプレーヤーコンポーネントで、ダークテーマをサポートするレスポンシブレイアウトが特徴です。

開けるプレビュー

                <div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
    <video class="w-full h-64" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="ml-3">
                <h2 class="text-white text-lg font-semibold">User Name</h2>
                <p class="text-gray-400 dark:text-gray-300 text-sm">2 hours ago</p>
            </div>
        </div>
        <div class="mt-2">
            <p class="text-gray-200 dark:text-gray-300 text-sm">Enjoy this video of a beautiful landscape!</p>
        </div>
        <div class="mt-4 flex justify-between text-gray-400 dark:text-gray-500">
            <button class="hover:text-white focus:outline-none">Like</button>
            <button class="hover:text-white focus:outline-none">Share</button>
            <button class="hover:text-white focus:outline-none">Comment</button>
        </div>
    </div>
</div>

1 ... 228 229 230 231 232 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント