検索コンポーネント

すべてのコンポーネント

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

RetroVintage_CheckoutFormComponent

レトロ/ビンテージチェックアウトフォーム、アースカラー、適度な複雑さ、ダークモードのサポート

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl font-mono">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout Information</h2>
  <form>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="mb-4">
        <label for="full_name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
        <input type="text" id="full_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your full name">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email address">
      </div>
    </div>

    <div class="mb-4">
      <label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
      <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your address">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-4">
        <label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
        <input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your city">
      </div>
      <div class="mb-4">
        <label for="state" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">State</label>
        <input type="text" id="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your state">
      </div>
      <div class="mb-4">
        <label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
        <input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your zip code">
      </div>
    </div>

    <div class="mb-6">
      <label for="card_number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Credit Card Number</label>
      <input type="text" id="card_number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your credit card number">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-6">
        <label for="expiry_date" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry_date" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/YY">
      </div>
      <div class="mb-6">
        <label for="cvv" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">CVV</label>
        <input type="text" id="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="CVV">
      </div>
        <div class="mb-6">
            <label for="country" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Country</label>
            <input type="text" id="country" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your country">
        </div>
    </div>

    <div class="flex items-center justify-between">
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-green-800 dark:hover:bg-green-900" type="button">
        Submit Payment
      </button>
    </div>
  </form>
</div>

スキューモーフィックログインフォーム

ダッシュボード用のトライアドカラーを使用したシンプルなSkeuomorphicログインフォームで、レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが特徴です。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 dark:bg-gray-900 bg-gray-100">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your username">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-light dark:shadow-neumorphic-dark dark:bg-blue-700 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
/* Basic neumorphic effect styles */
/* Light mode shadows */
.shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}

.shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}

/* Dark mode shadows */
.dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #1c2027, -8px -8px 15px #2e3643;
}

.dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1c2027, inset -5px -5px 10px #2e3643;
}

/* Triadic color examples (adjust as needed) */
/* Using shades of blue, yellow/orange, and red/pink for a triadic feel */
.bg-blue-600 { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.text-blue-600 { color: #2563eb; }
.hover\:text-blue-800:hover { color: #1e40af; }

.dark .bg-blue-700 { background-color: #1d4ed8; }
.dark .hover\:bg-blue-800:hover { background-color: #1e40af; }
.dark .text-blue-400 { color: #60a5fa; }
.dark .hover\:text-blue-500:hover { color: #3b82f6; }

/* Add subtle background colors for light/dark mode that aren't pure white/black to enhance neumorphism */
.bg-gray-100 { background-color: #f0f2f5; }
.dark .bg-gray-900 { background-color: #272c35; }
.bg-gray-200 { background-color: #e5e7eb; }
.dark .bg-gray-700 { background-color: #374151; }
.bg-white { background-color: #ffffff; }
.dark .bg-gray-800 { background-color: #1f2937; }

.text-gray-700 { color: #374151; }
.dark .text-gray-300 { color: #d1d5db; }
.text-gray-800 { color: #1f2937; }
.dark .text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }

</style>

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

3Dデザイン、類似の配色、ダークモードのサポートを備えたレスポンシブ製品カードコンポーネントで、ソーシャルメディアインターフェース用に設計されています。

開けるプレビュー

                <div class="max-w-sm mx-auto relative z-10 transform transition-transform duration-500 ease-in-out hover:scale-105">
  <div class="bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-gray-800 dark:to-black shadow-xl rounded-lg overflow-hidden dark:shadow-lg">
    <div class="relative h-48">
      <img class="w-full h-full object-cover" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image">
      <div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 m-2 rounded-lg text-sm font-bold dark:bg-blue-400">New</div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Awesome Product Title</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">This is a short description of the product, highlighting its key features and benefits.</p>
      <div class="flex items-center mt-4">
        <div class="text-xl font-bold text-blue-600 dark:text-blue-400">$99.99</div>
        <button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
      </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <span class="text-sm text-gray-700 dark:text-gray-400">Posted by John Doe</span>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic 3D effect. More advanced 3D requires transforms on hover/active states combined with perspective on parent. */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .dark\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
</style>

コミュニティフォーラムコンポーネント

鮮やかな配色で飾られたeコマース向けのレトロ/ビンテージコミュニティフォーラムコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen p-8 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-yellow-400 dark:bg-yellow-600 p-6">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Community Forum</h1>
    </div>
    <div class="p-6">
      <div class="flex items-center mb-6">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <textarea class="flex-grow p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Share your thoughts..."></textarea>
      </div>
      <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">New Post</button>

      <div class="mt-8 space-y-6">
        <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow">
          <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div>
              <h3 class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Just received my order and I'm loving the quality!</p>
          <div class="flex justify-end mt-4">
            <button class="text-blue-500 hover:underline text-sm mr-4">Reply</button>
            <button class="text-red-500 hover:underline text-sm">Report</button>
          </div>
        </div>

        <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow">
          <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <div>
              <h3 class="font-semibold text-gray-800 dark:text-white">Michael Chen</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">1 day ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Are there any discounts available for loyal customers?</p>
          <div class="flex justify-end mt-4">
            <button class="text-blue-500 hover:underline text-sm mr-4">Reply</button>
            <button class="text-red-500 hover:underline text-sm">Report</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

カートに入れるボタン

スキューモーフィックなスタイルでデザインされたレスポンシブな「カートに入れる」ボタンコンポーネントで、鮮やかな色とダークテーマのサポートがあり、ソーシャルメディアインターフェースに適しています。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
        <img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
        <div class="flex items-center justify-between w-full mt-4">
            <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                Add to Cart
            </button>
        </div>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
            <img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
        </div>
    </div>
</div>

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

シンプルでミニマリストのユーザーは、ブログやコンテンツ消費のコンポーネントについて言及しており、ダークテーマをサポートするレスポンシブデザインが特徴です。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Mentions</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">John Doe</h3>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Jane Smith</h3>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Mike Johnson</h3>
                <p class="text-gray-500 dark:text-gray-400">@mike_johnson</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <button class="bg-blue-500 text-white rounded-lg py-2 px-4 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800">View More</button>
    </div>
</div>

ニューモーフィズム登録フォーム

Tailwind CSSを使用したダークテーマをサポートするNeumorphism登録フォームコンポーネント

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-md w-full bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-8">Register</h2>
    <form>
      <div class="mb-6">
        <label for="username" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Username</label>
        <input type="text" id="username" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transform hover:scale-105 transition-transform duration-200 ease-in-out">Register</button>
    </form>
    <p class="text-center text-gray-600 dark:text-gray-300 text-sm mt-6">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500">Login here</a>.</p>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 14px #a7a7a7, -7px -7px 14px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 14px #4d4d4d, -7px -7px 14px #1a1a1a;
  }

  .shadow-neumorphic-input-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 5px 5px 10px #4d4d4d, inset -5px -5px 10px #1a1a1a;
  }

  .shadow-neumorphic-button-light {
      box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-button-dark {
      box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #1a1a1a;
  }
</style>

タブコンポーネント

インタラクティブな要素、レスポンシブデザイン、ダークモードのサポートを備えたeコマースWebサイト用のミニマリストタブコンポーネント。

開けるプレビュー

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <div class="flex items-center space-x-4 border-b">
            <button class="py-2 px-4 text-blue-500 border-b-2 border-blue-500 focus:outline-none">Tab 1</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 2</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 3</button>
        </div>
        <div class="p-4">
            <div class="block" id="tab1-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 1 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Explore our exclusive collections in Tab 1. Discover vibrant products that can elevate your shopping experience.</p>
            </div>
            <div class="hidden" id="tab2-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 2 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/401" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Find the latest trends and styles in Tab 2. Shop now and enjoy premium materials and designs.</p>
            </div>
            <div class="hidden" id="tab3-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 3 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/402" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Check out special deals and discounts in Tab 3. Your ultimate shopping destination is right here.</p>
            </div>
        </div>
    </div>
</div>

タブコンポーネント

アースカラーとビジネスWebサイト向けのマイクロインタラクションを備えたレスポンシブタブコンポーネントで、Tailwind CSSを使用したダークモードをサポートします。HTML クラスと Tailwind クラスのみを使用します。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md">
    <div class="flex justify-center">
      <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tl-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-state="active" data-tab="tab1">
        About Us
      </button>
      <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab2">
        Our Services
      </button>
      <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tr-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab3">
        Contact
      </button>
    </div>
    <div class="bg-white dark:bg-gray-700 p-4 rounded-b-lg shadow-md">
      <div data-tab-content="tab1">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Our Company Story</h2>
        <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="https://picsum.photos/400/200" alt="Company Image" class="mt-4 rounded-md">
      </div>
      <div class="hidden" data-tab-content="tab2">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">What We Offer</h2>
        <ul class="list-disc list-inside text-gray-600 dark:text-gray-300">
          <li>Consulting Services</li>
          <li>Development & Design</li>
          <li>Marketing Solutions</li>
        </ul>
        <img src="https://picsum.photos/400/201" alt="Services Image" class="mt-4 rounded-md">
      </div>
      <div class="hidden" data-tab-content="tab3">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Get in Touch</h2>
        <p class="text-gray-600 dark:text-gray-300">Email: [email protected]</p>
        <p class="text-gray-600 dark:text-gray-300">Phone: (123) 456-7890</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <p class="text-gray-800 dark:text-white">John Doe, CEO</p>
        </div>
      </div>
    </div>
  </div>
</div>

チェックアウトフォームコンポーネント

ポートフォリオ用の単色配色のマテリアルデザインチェックアウトフォームコンポーネントで、ダークテーマのサポートにレスポンシブです。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout</h2>
      <form>
        <div class="mb-4">
          <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
          <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="[email protected]">
        </div>
        <div class="mb-4">
          <label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
          <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="123 Main St">
        </div>
        <div class="mb-4">
          <label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
          <input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Anytown">
        </div>
        <div class="mb-4">
          <label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
          <input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="12345">
        </div>
        <div class="mb-6">
          <label for="card-number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Card Number</label>
          <input type="text" id="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="**** **** **** ****">
        </div>
        <div class="flex items-center justify-between">
          <button type="button" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">
            Submit Payment
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

1 ... 249 250 251 252 253 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント