検索コンポーネント

カテゴリ

コンポーネントスティッキーナビゲーション

スティッキーナビゲーション

スクロール時に表示されたままのナビゲーション

スティッキーナビゲーションコンポーネント

Responsive Sticky Navigation Component with Dark Mode

                <nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">Social Site</div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      </div>
      <div class="md:hidden">
        <button class="mobile-menu-button text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
          <svg class="h-6 w-6" 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="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="mobile-menu hidden md:hidden mt-2">
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Profile</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Messages</a>
    </div>
  </div>
</nav>

スティッキーナビゲーションコンポーネント

マイクロインタラクションとトライアドカラースキームで設計されたレスポンシブスティッキーナビゲーションバーで、ブログやコンテンツの消費に適しています。

開けるプレビュー

                <header class="bg-blue-300 dark:bg-blue-800 fixed top-0 w-full shadow-md z-10 transition-all duration-300 ease-in-out">
    <div class="flex justify-between items-center p-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold transition-transform transform hover:scale-105">MyBlog</a>
        <nav class="space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Blog</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="bg-blue-400 dark:bg-blue-700 h-1 transition-all duration-300 ease-in-out" style="transform: scaleY(0.5);"></div>
</header>

<main class="pt-20 px-4">
    <section class="my-8">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Latest Articles</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
        </div>
    </section>
</main>

<footer class="bg-gray-300 dark:bg-gray-700 p-4 text-center">
    <p class="text-gray-800 dark:text-gray-200">&copy; 2023 MyBlog. All rights reserved.</p>
</footer>

スティッキーナビゲーションコンポーネント

ソーシャルメディアインターフェイス用に設計された、鮮やかな色の複雑でスキューモーフィックなスティッキーナビゲーションバー。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。プロフィール画像、検索バー、通知、メッセージングアイコンを備えています。

開けるプレビュー

                <nav class="sticky top-0 bg-gradient-to-b from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Profile Pic and Site Title -->
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full border-2 border-white mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
      <span class="text-white text-2xl font-bold drop-shadow-md">SocialNet</span>
    </div>

    <!-- Search Bar -->
    <div class="flex-grow mx-5">
      <input type="text" placeholder="Search..." class="w-full px-4 py-2 rounded-full bg-white bg-opacity-30 text-white placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 dark:placeholder-gray-300">
    </div>

    <!-- Icons -->
    <div class="flex items-center space-x-6">
      <a href="#" class="text-white hover:scale-110 transition-transform duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>
      </a>
      <a href="#" class="text-white hover:scale-110 transition-transform duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55c-.18.18-.42.29-.67.29H9v-.54l-.55-.55z"/>
        </svg>
      </a>
    </div>
  </div>
</nav>

スティッキーナビゲーションコンポーネント

ソーシャルメディアインターフェイスに適したブルータリストスタイルのスティッキーナビゲーションコンポーネントで、大胆でハイコントラストなデザインとダークモードのサポートが特徴です。

開けるプレビュー

                <nav class="bg-blue-600 dark:bg-blue-900 fixed top-0 w-full z-30 p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <h1 class="text-white text-lg font-bold">Social Media</h1>
        </div>
        <ul class="flex space-x-8">
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Home</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Profile</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Messages</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Settings</a></li>
        </ul>
    </div>
</nav>

<header class="mt-16 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="container mx-auto">
        <h2 class="text-2xl text-gray-900 dark:text-white font-bold">Welcome to Our Network</h2>
        <p class="text-gray-700 dark:text-gray-300">Connect with friends and the world around you!</p>
    </div>
</header>

<main class="mt-4 p-4 container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a sample post content. It can be about anything interesting happening on the network.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Another sample post content with some engaging information for users.</p>
        </div>
    </div>
</main>

スティッキーナビゲーションコンポーネント

スキューモーフィックなスタイルでデザインされたスティッキーナビゲーションコンポーネントで、補色を配色し、豊富なインターフェースを備えたポートフォリオに適しています。

開けるプレビュー

                <header class="bg-gray-800 dark:bg-gray-900 shadow-lg sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full bg-white shadow-md">
                <h1 class="text-white text-2xl font-semibold">My Portfolio</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="#about" class="text-gray-200 hover:text-gray-100">About</a>
                <a href="#projects" class="text-gray-200 hover:text-gray-100">Projects</a>
                <a href="#contact" class="text-gray-200 hover:text-gray-100">Contact</a>
                <a href="#blog" class="text-gray-200 hover:text-gray-100">Blog</a>
            </nav>
            <div class="md:hidden">
                <button class="text-gray-200 focus:outline-none" aria-label="Open menu">
                    <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</header>

<main class="py-10 bg-gray-100 dark:bg-gray-800">
    <section id="about" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">About Me</h2>
        <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section id="projects" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Projects</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </section>

    <section id="contact" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Contact Me</h2>
        <form class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <input type="text" placeholder="Name" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
                <input type="email" placeholder="Email" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
            </div>
            <textarea placeholder="Message" class="mt-4 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" rows="4" required></textarea>
            <button type="submit" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow">Send Message</button>
        </form>
    </section>
</main>

<footer class="bg-gray-800 dark:bg-gray-900 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-gray-200">© 2023 My Portfolio. All Rights Reserved.</p>
        <div class="flex justify-center space-x-4 mt-2">
            <a href="https://randomuser.me" class="text-gray-200 hover:text-gray-100" aria-label="Instagram">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </a>
            <a href="#" class="text-gray-200 hover:text-gray-100" aria-label="Twitter">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.643 4.937c-.835.37-1.734.617-2.676.726.96-.576 1.694-1.49 2.04-2.573-.897.53-1.887.916-2.943 1.125-.84-.89-2.025-1.455-3.345-1.455-2.547 0-4.608 2.036-4.608 4.547 0 .356.04.703.117 1.037-3.83-.192-7.22-2.032-9.495-4.82-.395.683-.621 1.477-.621 2.358 0 1.63.826 3.069 2.083 3.917-.767-.024-1.487-.235-2.118-.589v.059c0 2.27 1.623 4.153 3.774 4.583-.395.108-.81.165-1.236.165-.303 0-.6-.029-.889-.086.601 1.864 2.339 3.218 4.394 3.262-1.62 1.28-3.645 2.047-5.842 2.047-.38 0-.759-.022-1.133-.066 2.091 1.335 4.594 2.118 7.269 2.118 8.733 0 13.492-7.31 13.492-13.63 0-.208-.004-.415-.015-.621.918-.658 1.714-1.48 2.347-2.415z"/></svg>
            </a>
        </div>
    </div>
</footer>

スティッキーナビゲーションコンポーネント

ビジネス/企業のWebサイト向けの単色の配色を備えたミニマリストのフラットデザインのスティッキーナビゲーションコンポーネント。デザインには複数のインタラクティブ要素が含まれており、ダークテーマをサポートしています。

開けるプレビュー

                <header class="bg-white dark:bg-gray-800 fixed top-0 inset-x-0 shadow-md z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40" alt="Logo" class="w-10 h-10 rounded-full">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Business Name</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Contact</a>
        </nav>
        <a href="#" class="hidden md:block bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition duration-150">Get Started</a>
        <button class="md:hidden flex items-center justify-center p-2 text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none" aria-label="Toggle menu">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 6h14M3 10h14M3 14h14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
    </div>
</header>

<main class="mt-16 p-4">
    <section class="bg-gray-100 dark:bg-gray-900 p-8 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Business</h2>
        <p class="text-gray-600 dark:text-gray-400">We provide exceptional services to help you grow your business.</p>
        <img src="https://picsum.photos/800/400" alt="Business Image" class="mt-4 rounded-lg shadow-md">
    </section>
</main>

レトロなEコマーススティッキーナビゲーション

鮮やかな色、複雑な要素、応答性、Tailwind CSSを使用したダークモードのサポートを備えたeコマースサイト向けのレトロ/ビンテージスティッキーナビゲーションコンポーネント。

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 text-white sticky top-0 z-50 shadow-lg dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand -->
    <div class="flex items-center">
      <span class="text-2xl font-bold font-serif italic">RetroFinds</span>
    </div>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">New Arrivals</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Shop All</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Sale</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Contact</a>
    </div>

    <!-- Search and Icons -->
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="bg-white text-gray-800 rounded-full py-1 px-4 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:bg-gray-700 dark:text-white">
        <svg class="h-5 w-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <a href="#" class="relative">
        <svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>
      <a href="#">
        <svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden flex items-center">
      <button class="mobile-menu-button">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu Content (hidden by default) -->
  <div class="mobile-menu hidden md:hidden bg-purple-500 dark:bg-gray-700">
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">New Arrivals</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Shop All</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Sale</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Contact</a>
  </div>
</nav>

スティッキーナビゲーションコンポーネント - ニューモーフィズム

Neumorphismデザイン、補色スキーム、ダークテーマのサポートを備えたレスポンシブスティッキーナビゲーションコンポーネントで、ポートフォリオWebサイトに適しています。Tailwind CSS をダークモードクラスで使用し、Neumorphism エフェクトの微妙なシャドウを含めます。

開けるプレビュー

                <nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
    <ul class="flex space-x-4">
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<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 #545454;
}
</style>

スティッキーナビゲーションコンポーネント

スキューモーフィックスタイルで設計されたスティッキーナビゲーションコンポーネントで、レスポンシブデザインと Tailwind CSS を使用したダークテーマのサポートを備えた e コマース Web サイトに適しています。

開けるプレビュー

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg py-4 fixed w-full z-10">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 rounded-lg" />
            <h1 class="text-lg text-white font-bold">ShopEasy</h1>
        </div>
        <div class="hidden md:flex md:space-x-8">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Products</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">About Us</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="h-8 w-8 rounded-full" />
            </a>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Cart</button>
        </div>
    </div>
</nav>

<main class="pt-24">
    <h2 class="text-3xl text-gray-800 dark:text-gray-200 text-center my-8">Welcome to ShopEasy!</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-8">Discover amazing products with unbeatable prices.</p>
    <div class="flex justify-center space-x-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="rounded-lg shadow-md" />
    </div>
</main>

スティッキーナビゲーションコンポーネント

eコマース用のダークモードスティッキーナビゲーションコンポーネントで、補色の配色と基本的なレイアウトを使用します。

開けるプレビュー

                <nav class="bg-gray-900 sticky top-0 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8 ml-10">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
        </button>
      </div>
    </div>
  </div>
</nav>