検索コンポーネント

すべてのコンポーネント

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

ハンバーガーメニューコンポーネント

ダッシュボードの目的に適した3Dスタイルで設計されたレスポンシブハンバーガーメニューコンポーネント。トライアドカラースキームが組み込まれており、インタラクティブな要素を備えた複雑なインターフェイスを備えており、明るいテーマと暗いテーマの両方をサポートします。

開けるプレビュー

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative w-16 h-16 mt-8 cursor-pointer group">
        <div class="absolute inset-0 bg-blue-500 rounded-lg transform transition-transform duration-200 ease-in-out group-hover:scale-105 dark:bg-blue-400"></div>
        <div class="bg-red-500 w-16 h-2 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-red-400"></div>
        <div class="bg-yellow-500 w-16 h-2 mt-1 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-yellow-400"></div>
    </div>
    <nav class="absolute top-16 left-0 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition-all duration-300 transform -translate-y-10 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
        <ul class="py-2">
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Dashboard</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Reports</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Analytics</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Settings</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/30.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Profile</span>
            </li>
        </ul>
    </nav>
</div>

ボタンコンポーネント

作品や製品を紹介するポートフォリオ用に設計されたミニマリストボタンコンポーネントで、鮮やかな色とレスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="flex flex-col items-center justify-center h-screen bg-white dark:bg-gray-900 p-4">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Portfolio Buttons</h1>
    <div class="space-y-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-red-500 rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">View Projects</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-200">Contact Me</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Download CV</a>
    </div>
</div>

ブルータリズムポートフォリオインタラクティブ

ブルータリズムデザイン、鮮やかな色、ポートフォリオ目的の複雑なレイアウトを備えたインタラクティブコンポーネントコンポーネントで、ダークテーマのサポートでレスポンシブです。

開けるプレビュー

                <div class="bg-gray-900 dark:bg-black p-8 min-h-screen">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-yellow-400 dark:bg-pink-600 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Alpha</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Alpha, showcasing its features and impact.</p>
      <a href="#" class="inline-block bg-black text-yellow-400 dark:bg-white dark:text-pink-600 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">Learn More</a>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-pink-600 dark:bg-yellow-400 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Beta</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Beta, highlighting its innovative aspects.</p>
      <a href="#" class="inline-block bg-black text-pink-600 dark:bg-white dark:text-yellow-400 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">View Case Study</a>
    </div>

    <!-- Interactive Contact Form -->
    <div class="md:col-span-2 bg-teal-400 dark:bg-purple-600 p-8 border-4 border-black dark:border-white shadow-brutal">
      <h3 class="text-3xl font-bold mb-6 text-black dark:text-white">Get in Touch</h3>
      <form action="#" method="post">
        <div class="mb-4">
          <label for="name" class="block text-black dark:text-white text-sm font-bold mb-2">Name:</label>
          <input type="text" id="name" name="name" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-black dark:text-white text-sm font-bold mb-2">Email:</label>
          <input type="email" id="email" name="email" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Email">
        </div>
        <div class="mb-6">
          <label for="message" class="block text-black dark:text-white text-sm font-bold mb-2">Message:</label>
          <textarea id="message" name="message" rows="6" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Message"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button type="submit" class="bg-black text-teal-400 dark:bg-white dark:text-purple-600 font-bold py-3 px-6 rounded border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:shadow-outline transition-colors">
            Send Message
          </button>
        </div>
      </form>
    </div>

    <!-- Testimonials/Avatar Section -->
    <div class="md:col-span-2 bg-red-500 dark:bg-blue-600 p-8 border-4 border-black dark:border-white shadow-brutal grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Working with this company was a game-changer!"</p>
        <p class="font-bold text-black dark:text-white">- Client A</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Highly recommended for their creativity and skill."</p>
        <p class="font-bold text-black dark:text-white">- Client B</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar 3" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"They exceeded all expectations!"</p>
        <p class="font-bold text-black dark:text-white">- Client C</p>
      </div>
    </div>

  </div>
</div>

<style>
.shadow-brutal {
  box-shadow: 8px 8px 0 0 #000;
}

.dark .shadow-brutal {
  box-shadow: 8px 8px 0 0 #fff;
}
</style>

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

ニューモーフィズムデザイン、グレースケールの配色、Tailwind CSSを使用したソーシャルメディアのシンプルな複雑さを備えたコミュニティフォーラムコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

開けるプレビュー

                <div class="container mx-auto p-4 antialiased text-gray-800 dark:text-gray-200">
  <div class="relative flex flex-col min-w-0 mb-6 break-words bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
    <div class="px-6 py-5">
      <div class="text-center">
        <h3 class="mb-1 text-xl font-bold">Community Forum</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Discuss and share with the community</p>
      </div>
    </div>
    <div class="flex-auto p-6">
      <div class="relative w-full">
        <input type="text" placeholder="Search topics..." class="px-3 py-3 placeholder-gray-600 dark:placeholder-gray-400 text-gray-800 dark:text-gray-200 relative bg-gray-300 dark:bg-gray-700 rounded text-sm shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark outline-none border-none focus:outline-none focus:shadow-outline w-full pr-10">
        <span class="z-10 h-full leading-snug font-normal absolute text-center text-gray-600 dark:text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3">
          <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </span>
      </div>
      <div class="mt-6">
        <div class="flex items-center justify-between mb-4">
          <h4 class="text-md font-semibold">Recent Discussions</h4>
          <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">View All</a>
        </div>
        <ul class="list-none">
          <li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
              <div>
                <p class="text-sm font-semibold">Discussion Topic 1</p>
                <span class="text-xs text-gray-600 dark:text-gray-400">Started by John Doe</span>
              </div>
            </div>
          </li>
          <li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
              <div>
                <p class="text-sm font-semibold">Discussion Topic 2</p>
                <span class="text-xs text-gray-600 dark:text-gray-400">Started by Jane Smith</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
}
.shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #717171, -7px -7px 14px #8f8f8f;
}
.shadow-neumorphic-input-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-input-dark {
    box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #8f8f8f;
}
.shadow-neumorphic-item-light {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-item-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #8f8f8f;
}
</style>

ニューモルフィックローダー

ダークモードをサポートするeコマースサイト用のシンプルなNeumorphicローダーコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-64 h-64">
    <div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>

通知コンポーネント

レトロ/ビンテージの美学とeコマース用の鮮やかな色で設計された複雑な通知コンポーネントで、ダークモードをサポートします。

開けるプレビュー

                <div class="relative z-10">
  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
        </div>
      </div>
      <div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

ソーシャルコンポーネントコンポーネント

レトロ/ビンテージの美学でデザインされたレスポンシブなソーシャルメディアコンポーネントで、複数のインタラクティブ要素とダークテーマを備えた豊富なインターフェイスを備えています。

開けるプレビュー

                <div class="bg-amber-400 dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h1 class="text-4xl font-bold text-center text-brown-600 dark:text-yellow-400">Retro Social Media</h1>
    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-lg font-semibold text-black dark:text-white">John Doe</h2>
                <p class="text-gray-700 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Just enjoyed a retro gaming night! Who's up for some Mario Kart? 🎮</p>
        <img class="mt-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Retro Gaming">
        <div class="mt-4 flex justify-between">
            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">Like ❤️</button>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">Comment 💬</button>
            <button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600">Share 🔗</button>
        </div>
    </div>

    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-lg font-semibold text-black dark:text-white">Recent Posts</h3>
        <div class="mt-4 space-y-4">
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-300">Loved the concert last night! 🎤</p>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Mike Lee</h4>
                    <p class="text-gray-600 dark:text-gray-300">Throwback to my first Car Rally! 🚗</p>
                </div>
            </div>
        </div>
    </div>
</div>

ショッピングカートコンポーネント

Neumorphismデザインとダークテーマをサポートするための補色スキームを備えたシンプルなレスポンシブショッピングカートコンポーネント。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>  <ul class="space-y-4">    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>        <p class="text-gray-600 dark:text-gray-400">$19.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>        <p class="text-gray-600 dark:text-gray-400">$29.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>  </ul>  <div class="mt-6">    <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4>  </div>  <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button>  <footer class="mt-6 text-center text-gray-600 dark:text-gray-400">    <p>Created for Portfolio</p>  </footer> </div>

ヘッダーコンポーネント

Neumorphismスタイルを使用して設計されたシンプルなヘッダーコンポーネントで、鮮やかな色で、ブログ/コンテンツのWebページに最適です。レスポンシブデザインのダークモードサポートを備えています。

開けるプレビュー

                <header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
</header>

Maps コンポーネント

Tailwind CSS を使用したダークモードをサポートするレスポンシブマップコンポーネント。

開けるプレビュー

                <div class="bg-gray-900 text-gray-200 p-8 min-h-screen flex flex-col items-center justify-center">
  <h2 class="text-2xl font-bold mb-6 text-teal-300">My Location</h2>
  <div class="w-full max-w-md rounded-lg shadow-lg overflow-hidden">
    <div class="relative" style="padding-bottom: 56.25%;"><!-- 16:9 Aspect Ratio -->
      <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1dYOUR_LATITUDE_LONGITUDE!2dYOUR_LONGITUDE!3dYOUR_LATITUDE!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwMDAnMDAuMCJTIDc4wrAwMCcwMC4wIlc!5e0!3m2!1sen!2sus!4vYOUR_GENERATED_ID"
        width="100%" 
        height="100%" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy" 
        class="absolute top-0 left-0"
      ></iframe>
    </div>
  </div>
  <p class="mt-4 text-sm text-gray-400">Replace "YOUR_LATITUDE_LONGITUDE" and "YOUR_LONGITUDE" and "YOUR_LATITUDE" and "YOUR_GENERATED_ID" with your actual map details.</p>
</div>

1 ... 233 234 235 236 237 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント