検索コンポーネント

すべてのコンポーネント

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

バッジコンポーネント

ダークモードをサポートするシンプルで応答性の高いバッジコンポーネントで、ポートフォリオに適したトライアドカラースキームを使用します。

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
    <div class="flex flex-wrap gap-2">
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
    </div>
  </div>
</div>

トップに戻るボタン

鮮やかなダークモードデザインのeコマース用のトップに戻るボタン。

開けるプレビュー

                <div class="fixed bottom-4 right-4 z-50">
  <a href="#" class="bg-purple-600 dark:bg-purple-800 text-white dark:text-purple-200 p-4 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50">
    <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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </a>
</div>

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

ブルータリズム、複雑、eコマースに焦点を当てたソーシャルコンポーネントで、類似の配色をTailwind CSSで実装しています。応答性が高く、ダークモードをサポートしています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <!-- Social Components Component -->
  <div class="max-w-4xl w-full bg-red-400 dark:bg-red-800 border-4 border-black dark:border-white shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] p-8 space-y-8">
    
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-b-4 border-black dark:border-white pb-4">
      <h1 class="text-5xl font-extrabold text-black dark:text-white uppercase tracking-tighter mb-4 sm:mb-0">Social Feed</h1>
      <div class="flex space-x-4">
        <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">New Post</button>
        <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Profile</button>
      </div>
    </div>

    <!-- Main Content Area - Grid Layout for Posts -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Social Post Card 1 -->
      <div class="bg-green-400 dark:bg-green-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Jane Doe</h2>
            <p class="text-black dark:text-white text-sm">2 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/237/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Absolutely loving this new collection! The colors are so vibrant and the quality is superb. Perfect for my e-commerce store."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 124 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 36 Comments</button>
          </div>
          <button class="bg-purple-400 dark:bg-purple-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-purple-500 dark:hover:bg-purple-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 2 -->
      <div class="bg-yellow-400 dark:bg-yellow-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">John Smith</h2>
            <p class="text-black dark:text-white text-sm">5 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Just received my order and I'm blown away! The design is so unique and the product feels incredibly durable. Highly recommend for any e-commerce business."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 289 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 78 Comments</button>
          </div>
          <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 3 -->
      <div class="bg-blue-400 dark:bg-blue-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Emily White</h2>
            <p class="text-black dark:text-white text-sm">1 day ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1025/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Selling like hotcakes! My customers can't get enough of these amazing products. The brutalist design elements really make my e-commerce site stand out."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 512 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 112 Comments</button>
          </div>
          <button class="bg-green-400 dark:bg-green-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-green-500 dark:hover:bg-green-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 4 -->
      <div class="bg-purple-400 dark:bg-purple-700 border-4 border-black dark:border-white p-6 shadow-[6px_6_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">David Lee</h2>
            <p class="text-black dark:text-white text-sm">3 days ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1040/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Fantastic addition to my product lineup. The aesthetic is so unique and powerful, perfect for attracting attention on my e-commerce platform."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 345 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 98 Comments</button>
          </div>
          <button class="bg-red-400 dark:bg-red-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-red-500 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
      </div>

    </div>

    <!-- Call to Action / Footer Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-t-4 border-black dark:border-white pt-8">
      <p class="text-2xl text-black dark:text-white font-bold mb-4 sm:mb-0">Explore more products on our store!</p>
      <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-8 py-4 border-4 border-black dark:border-white text-2xl font-bold uppercase shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">Shop Now</button>
    </div>

  </div>
</div>

バッジコンポーネント

eコマース用のレスポンシブダークモードバッジコンポーネントで、補色の配色とインタラクティブな要素を備えたさまざまなバッジを表示します。

開けるプレビュー

                <div class="bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-white mb-8">Product Badges</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Badge 1: New Arrival (Complementary - Orange/Blue) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">NEW ARRIVAL</span>
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Stylish Headphones</h3>
        <p class="text-gray-400 text-sm mb-4">Experience immersive audio with these brand new headphones.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Audio</span>
          <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Electronics</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$199.99</span>
          <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition duration-300">Add to Cart</button>
        </div>
      </div>

      <!-- Badge 2: Best Seller (Complementary - Green/Red) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">BEST SELLER</span>
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Ergonomic Office Chair</h3>
        <p class="text-gray-400 text-sm mb-4">Work in comfort with our most popular ergonomic chair.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Office</span>
          <span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Furniture</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$349.00</span>
          <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition duration-300">View Details</button>
        </div>
      </div>

      <!-- Badge 3: Limited Stock (Complementary - Purple/Yellow) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-yellow-500 text-gray-900 text-xs font-bold px-3 py-1 rounded-full rotate-12">LIMITED STOCK</span>
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Vintage Camera Lens</h3>
        <p class="text-gray-400 text-sm mb-4">Capture stunning photos with this rare vintage lens.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Photography</span>
          <span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Collector's Item</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$599.99</span>
          <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md transition duration-300">Buy Now</button>
        </div>
      </div>

      <!-- Badge 4: Special Offer (Complementary - Cyan/Magenta) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">SPECIAL OFFER</span>
        <img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Smart Home Hub</h3>
        <p class="text-gray-400 text-sm mb-4">Control your entire home with this intelligent hub.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Smart Home</span>
          <span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Automation</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold line-through">$129.99</span>
          <span class="text-green-400 text-xl font-bold">$99.99</span>
          <button class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white px-4 py-2 rounded-md transition duration-300">Shop Offer</button>
        </div>
      </div>

      <!-- Badge 5: Customer Favorite (Complementary - Lime/Indigo) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">CUSTOMER FAVORITE</span>
        <img src="https://picsum.photos/400/300?random=5" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Premium Coffee Beans</h3>
        <p class="text-gray-400 text-sm mb-4">Our most loved coffee blend, perfect for your morning brew.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Food & Drink</span>
          <span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Coffee</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$24.50</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md transition duration-300">Order Now</button>
        </div>
      </div>

      <!-- Badge 6: Eco-Friendly (Complementary - Teal/Pink) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">ECO-FRIENDLY</span>
        <img src="https://picsum.photos/400/300?random=6" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Reusable Shopping Bag</h3>
        <p class="text-gray-400 text-sm mb-4">Reduce your carbon footprint with this stylish reusable bag.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Sustainable</span>
          <span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Home Goods</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$12.00</span>
          <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md transition duration-300">Learn More</button>
        </div>
      </div>

    </div>
  </div>
</div>

ニューモーフィックドロップダウンメニュー(グレースケール)

グレースケール色のニューモルフィックドロップダウンメニュー。ポートフォリオ用のシンプルなレイアウトで、ダークモードのサポートにより応答性があります。JavaScript はありません。

開けるプレビュー

                <div class="dark:bg-gray-900 bg-gray-200 min-h-screen flex items-center justify-center font-sans">

  <!-- Dropdown container -->
  <div class="relative inline-block text-left">

    <!-- Dropdown toggle button -->
    <button type="button" class="inline-flex justify-center w-full rounded-md dark:bg-gray-800 dark:text-gray-300 dark:shadow-2xl dark:hover:bg-gray-700 bg-gray-300 px-4 py-2 text-sm font-medium text-gray-700 shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-gray-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>

    <!-- Dropdown menu (hidden by default) -->
    <div class="absolute right-0 mt-2 w-56 origin-top-right rounded-md dark:bg-gray-800 dark:shadow-2xl bg-gray-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Menu Item -->
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">My Work</a>
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">About Me</a>
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">Contact</a>
      </div>
    </div>
  </div>
</div>

ナビゲーションコンポーネントコンポーネント

ポートフォリオ用に設計された、鮮やかな色とマイクロインタラクションを備えたレスポンシブナビゲーションコンポーネント。

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-white text-2xl font-bold transform hover:scale-105 transition-transform duration-300">My Portfolio</a>
    <ul class="flex space-x-6">
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Home
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Work
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        About
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
    </ul>
  </div>
</nav>

ツールチップコンポーネント

応答性の高いダークをテーマにしたツールチップコンポーネントで、Triadic カラースキームの一部で、ポートフォリオに適しています。Tailwind CSSで構築され、シンプルでミニマルな美学を実現しています。

開けるプレビュー

                <div class="relative flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
  <div class="group relative flex">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">Hover Me</button>
    <div class="opacity-0 w-48 bg-gray-700 dark:bg-gray-900 text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -translate-x-1/2 left-1/2 ml-0 mb-3 pointer-events-none transition-opacity duration-300">
      <p>This is a triadic color scheme tooltip for your portfolio.</p>
      <svg class="absolute text-gray-700 dark:text-gray-900 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
    </div>
  </div>
</div>

モーダルコンポーネント

eコマース向けの複雑で応答性が高く、インタラクティブなモーダルコンポーネントであり、ユーザーエンゲージメントのための補完的な配色とマイクロインタラクションを備えています。ダークテーマをサポートします。

開けるプレビュー

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
  <div class="relative p-8 border w-full max-w-md md:max-w-xl lg:max-w-3xl shadow-lg rounded-2xl bg-white dark:bg-gray-800 transform transition-all duration-500 scale-105 hover:scale-100">

    <!-- Close Button -->
    <div class="absolute top-4 right-4">
      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition ease-in-out duration-300 transform hover:rotate-90 focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Product Image and Details -->
    <div class="md:flex items-center">
      <div class="w-full md:w-1/2 rounded-lg overflow-hidden transform transition-all duration-500 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover">
      </div>
      <div class="w-full md:w-1/2 md:ml-6 mt-4 md:mt-0 text-center md:text-left">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">Deluxe Smartwatch Pro</h2>
        <p class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold mb-4">Electronics</p>
        <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">Experience the future on your wrist with our Deluxe Smartwatch Pro. Track your fitness, receive notifications, and stay connected.</p>

        <div class="flex items-center justify-center md:justify-start mb-4">
          <span class="text-4xl font-bold text-teal-600 dark:text-teal-400 mr-3">$299</span>
          <span class="text-lg text-gray-500 dark:text-gray-400 line-through">$399</span>
          <span class="ml-3 px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full transform hover:scale-110 transition duration-300">-25%</span>
        </div>
        
        <!-- Quantity Selector -->
        <div class="mb-5 flex items-center justify-center md:justify-start">
          <label for="quantity" class="text-gray-700 dark:text-gray-300 mr-3">Quantity:</label>
          <select id="quantity" name="quantity" class="form-select block w-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out hover:border-indigo-400">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>

        <!-- Call to Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-center md:justify-start space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold text-lg hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
            Add to Cart
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.5 13 5.707 13H17a1 1 0 000-2H5.707l.293-.293A.997.997 0 006 10.5V10h1a1 1 0 000-2H7V7a1 1 0 000-2h1a1 1 0 000-2H6.555L5.216 1.76C5.074 1.25 4.5 1 4 1H3zM4 16a1 1 0 100-2 1 1 0 000 2zm10 0a1 1 0 100-2 1 1 0 000 2z" />
            </svg>
          </button>
          <button class="flex-1 px-6 py-3 rounded-xl bg-teal-500 text-white font-semibold text-lg hover:bg-teal-600 dark:bg-teal-400 dark:hover:bg-teal-500 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75">
            Buy Now
          </button>
        </div>

      </div>
    </div>

    <!-- Customer Reviews Section -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center md:text-left">Customer Reviews</h3>
      
      <div class="space-y-6">
        <!-- Review 1 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">Jane Doe</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Absolutely love this smartwatch! The features are incredible, and it looks super stylish."</p>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-teal-500" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">John Smith</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Great value for money. The battery life is impressive, and I love the vibrant display."</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

レイアウトコンポーネントコンポーネント

Glassmorphism スタイル、鮮やかな配色、および Tailwind CSS を使用したダークテーマのサポートを備えたレスポンシブダッシュボードレイアウトコンポーネント。サイドバーと、すりガラスのような半透明の要素とぼかし効果を備えたメインコンテンツエリアが特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-900 dark:to-black text-gray-200 dark:text-gray-300">
    <div class="flex flex-col md:flex-row">
        <!-- Sidebar -->
        <aside class="w-full md:w-64 p-6 space-y-6 bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg m-4 shadow-lg md:h-screen md:sticky md:top-4">
            <div class="text-2xl font-bold text-white dark:text-purple-300">Dashboard</div>
            <nav class="space-y-4">
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l.01.01M17 10v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                    Home
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1M12 8c-.11 0-.22-.02-.33-.03M2.985 19.845A6.5 6.5 0 019 12.5v-1.1c0 .991.737 1.838 1.83 2 2.204.306 3.659 1.815 3.659 3.093l-.004.004A6.5 6.5 0 0112 21a6.5 6.5 0 01-6.015-3.155M1.015 19.845C2.107 18.067 4 16.5 6.5 16.5c1.442-.016 2.875-.521 3.864-1.413M7.5 14a.5.5 0 100-1 .5.5 0 000 1z"></path></svg>
                    Analytics
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"></path></svg>
                    Reports
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    Settings
                </a>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 p-6 md:p-10">
            <header class="flex items-center justify-between mb-8">
                <h1 class="text-4xl font-extrabold text-white dark:text-purple-300">Overview</h1>
                <div class="flex items-center space-x-4">
                    <span class="text-white dark:text-purple-300">Welcome, User!</span>
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600">
                </div>
            </header>

            <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Card 1 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Total Sales</h2>
                    <p class="text-3xl font-extrabold text-purple-400 dark:text-purple-500">$12,345</p>
                    <p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" 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="M7 11h10m-5-5v12"></path></svg> +15% from last month</p>
                </div>

                <!-- Card 2 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">New Users</h2>
                    <p class="text-3xl font-extrabold text-teal-300 dark:text-teal-400">876</p>
                    <p class="text-red-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" 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="M13 17h6m-3-3v6m5-10a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h16a1 1 0 011 1v4z"></path></svg>-5% from last month</p>
                </div>

                <!-- Card 3 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Orders Pending</h2>
                    <p class="text-3xl font-extrabold text-yellow-300 dark:text-yellow-400">42</p>
                    <p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg> +8% from last week</p>
                </div>
            </section>

            <section class="mt-8">
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Recent Activity</h2>
                    <ul class="space-y-4">
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">Jane Doe</span> purchased <span class="font-semibold text-blue-200 dark:text-blue-300">Premium Subscription</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">2 hours ago</span>
                        </li>
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">John Smith</span> commented on <span class="font-semibold text-pink-200 dark:text-pink-300">Marketing Report Q3</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">1 day ago</span>
                        </li>
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/women/60.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">Emily White</span> uploaded <span class="font-semibold text-green-200 dark:text-green-300">New Product Images</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">3 days ago</span>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
    </div>
</div>

アコーディオンコンポーネント

ソーシャルメディア用の鮮やかな色のGlassmorphismアコーディオンコンポーネントで、ぼかし効果のあるすりガラスのような半透明の要素、複数のインタラクティブ要素を備えた豊富なインターフェイス、レスポンシブデザイン、ダークテーマのサポートが特徴です。JavaScriptコードは必要なく、Tailwindクラスを含むHTMLのみが必要です。

開けるプレビュー

                <div class="relative min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
    <div class="absolute inset-0 z-0 bg-[url('https://picsum.photos/1920/1080?random=1')] bg-cover bg-center opacity-20"></div>
    <div class="absolute inset-0 z-0 backdrop-filter backdrop-blur-3xl"></div>
    <div class="relative z-10 w-full max-w-2xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 rounded-3xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
        <div class="p-8">
            <h2 class="text-4xl font-extrabold text-white dark:text-white mb-8 text-center drop-shadow-lg">Social Feed Accordion</h2>
            
            <!-- Accordion Item 1 -->
            <div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-1" class="hidden peer">
                <label for="accordion-1" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Sarah J., posted a new photo</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
                </label>
                <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Absolutely loving this view! So refreshing to be out in nature. #TravelGoals #NatureLover"</p>
                        <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-xl mb-4 w-full h-auto object-cover border border-white border-opacity-30 dark:border-gray-500">
                        <div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 24 Likes</span>
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 8 Comments</span>
                        </div>
                        <div class="mt-4 flex flex-col space-y-3">
                            <div class="flex items-start">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Commenter 1" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
                                <p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">John D.</span>: "Stunning! Where is this place?"</p>
                            </div>
                            <div class="flex items-start">
                                <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Commenter 2" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
                                <p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">Emily R.</span>: "Love your adventurous spirit!"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accordion Item 2 -->
            <div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-2" class="hidden peer">
                <label for="accordion-2" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Mike T., shared an article</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
                </label>
                <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Fascinating read on the future of AI. Definitely recommend checking this out. #AI #Technology"</p>
                        <div class="bg-white bg-opacity-20 dark:bg-gray-600 dark:bg-opacity-40 rounded-xl p-4 flex items-center mb-4 border border-white border-opacity-30 dark:border-gray-500">
                            <img src="https://picsum.photos/100/100?random=3" alt="Article Thumbnail" class="w-24 h-24 object-cover rounded-lg mr-4">
                            <div>
                                <h4 class="text-lg font-bold text-white dark:text-white mb-1">The Rise of Intelligent Machines</h4>
                                <p class="text-white text-opacity-80 dark:text-gray-300 text-sm">An in-depth look at the impact of AI on society and beyond.</p>
                                <a href="#" class="text-blue-200 hover:underline dark:text-blue-300 text-sm">Read More</a>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 45 Likes</span>
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 15 Comments</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accordion Item 3 -->
            <div class="bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-3" class="hidden peer">
                <label for="accordion-3" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Jessica L., updated her profile</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
                </label>
                <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Excited to start a new chapter! Check out my updated bio and recent work. #NewBeginnings #CareerGoals"</p>
                        <div class="flex items-center text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg> Profile Updated</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 115 116 117 118 119 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント