検索コンポーネント

すべてのコンポーネント

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

ニューモーフィズムローダー

ポートフォリオ用の単色の配色を備えたシンプルなNeumorphismローダーコンポーネントで、レスポンシブデザインとダークテーマがサポートされています。

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="flex space-x-2 animate-pulse">
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
  </div>
</div>

Brutalist Columns コンポーネント

ブルータリズムのデザインでスタイル化された複雑な列コンポーネントで、単色の配色で、ブログやコンテンツの消費に適しています。このデザインは、高コントラスト、珍しいレイアウトを特徴とし、ダークモードをサポートしています。

開けるプレビュー

                <div class="container mx-auto p-6">
    <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Brutalist Columns Component</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 1</h2>
            <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione.</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-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 2</h2>
            <p class="text-gray-700 dark:text-gray-300">Animi, cupiditate! Doloremque aperiam sit perspiciatis quam.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/202" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 3</h2>
            <p class="text-gray-700 dark:text-gray-300">Qui facere, necessitatibus quos aut eius optio deserunt.</p>
            <div class="flex items-center mt-4">
                <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-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/203" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 4</h2>
            <p class="text-gray-700 dark:text-gray-300">Aliquam explicabo, at velit? Voluptate, facere voluptatem?</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/204" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 5</h2>
            <p class="text-gray-700 dark:text-gray-300">Adipisci veniam, nobis porro repellat quo beatae impedit?</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/205" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 6</h2>
            <p class="text-gray-700 dark:text-gray-300">Perferendis est provident, voluptatum dolor cumque atque.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
    </div>
</div>

ブルータリストコンテナコンポーネント

ブルータリズムスタイルと鮮やかな配色でデザインされたシンプルでありながら大胆なコンテナコンポーネントで、ビジネスや企業のWebサイトに最適で、Tailwind CSSを使用したダークモードをサポートします。

開けるプレビュー

                <div class="container mx-auto p-4">
    <div class="bg-yellow-400 dark:bg-yellow-600 border-4 border-red-800 dark:border-red-500 rounded-lg shadow-xl p-6">
        <h1 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4">Business Title</h1>
        <p class="text-base text-gray-800 dark:text-gray-200 mb-6">This is a simple yet bold container designed for a business or corporate website. The design embraces a brutalist style with vibrant colors.</p>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="w-full h-auto rounded-lg mb-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-blue-900 dark:border-blue-200 mr-2">
            <div class="text-sm">
                <p class="font-bold text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">CEO, Company Name</p>
            </div>
        </div>
    </div>
</div>

登録フォームコンポーネント

Neumorphismデザイン、類似の配色、およびダークモードのサポートを備えたレスポンシブ登録フォームで、ソーシャルメディアの目的でTailwind CSSで構築されています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm p-8 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
    <form>
      <div class="mb-5">
        <label for="username" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
        <input type="text" id="username" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your username">
      </div>
      <div class="mb-5">
        <label for="email" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your password">
      </div>
      <button type="submit" class="w-full px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 shadow-neumorphism-light dark:shadow-neumorphism-dark">Register</button>
    </form>
    <div class="mt-6 text-center text-gray-700 dark:text-gray-300">
      Already have an account? <a href="#" class="font-medium text-blue-500 hover:underline">Login</a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphism-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
  }
  .shadow-inner-neumorphism-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-inner-neumorphism-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
  }
</style>

RetroEarthダッシュボード目次

レトロ/ビンテージデザイン、アースカラーの配色、ダッシュボードの使用のためのダークモードのサポートを備えたレスポンシブ目次コンポーネント。

開けるプレビュー

                <div class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-6 rounded-lg shadow-lg font-mono">
  <h2 class="text-xl font-bold mb-4">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="hover:underline">1. Introduction</a></li>
    <li><a href="#section-2" class="hover:underline">2. Data Overview</a></li>
    <li>
      <a href="#section-3" class="hover:underline">3. Key Metrics</a>
      <ul class="ml-4 mt-1 space-y-1">
        <li><a href="#section-3-1" class="hover:underline">3.1. Sales Performance</a></li>
        <li><a href="#section-3-2" class="hover:underline">3.2. User Engagement</a></li>
      </ul>
    </li>
    <li><a href="#section-4" class="hover:underline">4. Conclusion</a></li>
  </ul>
</div>

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

ビジネス/企業のWebサイト向けに設計された複雑なソーシャルコンポーネントセクションであり、マテリアルデザインの原則とグレースケールの配色を使用しています。レスポンシブデザインとダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="max-w-6xl mx-auto p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Connect with Us</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=1" class="w-full h-32 object-cover rounded-lg" alt="Social Image 1">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Twitter</h3>
                <p class="text-gray-600 dark:text-gray-400">Stay updated with our latest tweets and news.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Twitter</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=2" class="w-full h-32 object-cover rounded-lg" alt="Social Image 2">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join Us on LinkedIn</h3>
                <p class="text-gray-600 dark:text-gray-400">Connect with us professionally and grow your network.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit LinkedIn</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=3" class="w-full h-32 object-cover rounded-lg" alt="Social Image 3">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Like Us on Facebook</h3>
                <p class="text-gray-600 dark:text-gray-400">Join our community and stay updated with our activities.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Facebook</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=4" class="w-full h-32 object-cover rounded-lg" alt="Social Image 4">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Subscribe to Our YouTube</h3>
                <p class="text-gray-600 dark:text-gray-400">Watch our latest videos and tutorials.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit YouTube</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=5" class="w-full h-32 object-cover rounded-lg" alt="Social Image 5">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Instagram</h3>
                <p class="text-gray-600 dark:text-gray-400">Catch a glimpse of our behind-the-scenes.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Instagram</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=6" class="w-full h-32 object-cover rounded-lg" alt="Social Image 6">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Connect on GitHub</h3>
                <p class="text-gray-600 dark:text-gray-400">Explore our projects and collaborations.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit GitHub</a>
            </div>
        </div>
    </div>
</div>

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

ダークモード用に設計されたレスポンシブな製品カードコンポーネントで、鮮やかな色と、ブログやコンテンツの消費に適した複数のインタラクティブ要素が特徴です。

開けるプレビュー

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

Skeuomorphic Pastel Grid Layout コンポーネント

ブログ/コンテンツ用のスキューモーフィックパステルグリッドレイアウト、ダークモード付きシンプル

開けるプレビュー

                <div class="container mx-auto p-4 dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Skeuomorphic Card 1 -->
    <div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 rounded-lg shadow-xl p-6 transform transition perspective-1000 hover:rotate-x-2 hover:rotate-y-2 hover:scale-105 dark:shadow-none dark:border dark:border-gray-700">
      <div class="bg-white dark:bg-gray-600 rounded-md p-4 shadow-inner dark:shadow-none">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Yet Another Blog Post Title</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-4 border-2 border-white dark:border-gray-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-gray-200 leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Aug 18, 2024</p>
        </div>
      </div>
    </div>

    <!-- Skeuomorphic Card 2 -->
    <div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 rounded-lg shadow-xl p-6 transform transition perspective-1000 hover:rotate-x-2 hover:rotate-y-2 hover:scale-105 dark:shadow-none dark:border dark:border-gray-700">
        <div class="bg-white dark:bg-gray-600 rounded-md p-4 shadow-inner dark:shadow-none">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Another Blog Post Title</h2>
          <p class="text-gray-600 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-white dark:border-gray-600 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-gray-200 leading-none">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-400">Aug 17, 2024</p>
          </div>
        </div>
      </div>

    <!-- Skeuomorphic Card 3 -->
    <div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 rounded-lg shadow-xl p-6 transform transition perspective-1000 hover:rotate-x-2 hover:rotate-y-2 hover:scale-105 dark:shadow-none dark:border dark:border-gray-700">
        <div class="bg-white dark:bg-gray-600 rounded-md p-4 shadow-inner dark:shadow-none">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">A Different Blog Post</h2>
          <p class="text-gray-600 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-white dark:border-gray-600 shadow-md" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-gray-200 leading-none">Peter Jones</p>
            <p class="text-gray-600 dark:text-gray-400">Aug 16, 2024</p>
          </div>
        </div>
      </div>

  </div>
</div>

ポートフォリオナビゲーションバー

ダークテーマをサポートするレスポンシブナビゲーションバーで、マテリアルデザインの原則とアーストーンの配色を使用してポートフォリオWebサイト用に設計されています。これには、ブランドロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。デザインは適度に複雑で、さまざまな画面サイズに適応します。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-gray-800 dark:text-white text-lg font-bold">Portfolio</span>
          </a>
        </div>
        
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Projects</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Contact</a>
        </div>
      </div>
      
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="#" class="py-2 px-2 font-medium text-gray-500 dark:text-gray-300 rounded hover:bg-green-500 dark:hover:bg-green-400 hover:text-white dark:hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 dark:bg-green-400 rounded hover:bg-green-400 dark:hover:bg-green-500 transition duration-300">Sign Up</a>
      </div>
      
      <div class="-mr-2 flex md:hidden">
        <button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 dark:hover:bg-gray-700 dark:focus:bg-gray-700">
          <svg class="h-6 w-6" 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="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="mobile-menu hidden md:hidden">
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
  </div>
</nav>

3D Maps コンポーネント

ダークモードをサポートするビジネスWebサイト用のレスポンシブ3Dマップコンポーネント。

開けるプレビュー

                <section class="py-10 text-gray-700 bg-gray-100 dark:bg-gray-800 dark:text-gray-300">
      <div class="map-container container mx-auto px-4 relative" style="perspective: 1000px;">
        <div class="map-element" style="transform: rotateX(20deg) rotateZ(-10deg);">
          <!-- Replace with an actual map embed or a static image that looks like a map -->
          <img src="https://picsum.photos/seed/map/800/600" alt="Company Location Map" class="w-full h-auto shadow-lg rounded-lg">
        </div>
        <div class="map-overlay absolute top-0 left-0 w-full h-full flex items-center justify-center">
          <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-xl text-center" style="transform: translateZ(50px);">
            <h3 class="text-xl font-bold mb-2">Find Us</h3>
            <p class="text-gray-600 dark:text-gray-400">123 Business St, Corporate City</p>
            <a href="#" class="mt-4 inline-block bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">Get Directions</a>
          </div>
        </div>
      </div>
    </section>

1 ... 213 214 215 216 217 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント