検索コンポーネント

すべてのコンポーネント

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

機能コンポーネントコンポーネント

シンプルでレスポンシブな 3D にインスパイアされた e コマースプロダクトカードで、類似の配色で、ダークモードをサポートします。

                <div class="relative flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
  <div class="relative h-96 w-72 transform rounded-lg bg-gradient-to-br from-purple-400 to-indigo-500 p-6 shadow-2xl transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-indigo-800">
    <div class="absolute inset-0 -z-10 transform rounded-lg bg-gradient-to-br from-purple-300 to-indigo-400 opacity-50 blur-xl dark:from-purple-600 dark:to-indigo-700"></div>
    <div class="flex flex-col items-center justify-between h-full">
      <h2 class="mb-2 text-center text-2xl font-bold text-white">3D Product</h2>
      <div class="relative mb-4 h-32 w-32">
        <img src="https://picsum.photos/id/176/200/200" alt="Product Image" class="h-full w-full rounded-full object-cover shadow-lg transform transition-transform duration-300 hover:scale-110">
        <div class="absolute inset-0 rounded-full ring-4 ring-white ring-opacity-50 dark:ring-gray-800"></div>
      </div>
      <p class="mb-4 text-center text-sm text-white text-opacity-80">A high-quality product with a unique 3D design for an immersive experience.</p>
      <div class="flex items-center justify-between w-full">
        <span class="text-xl font-bold text-white">$99.99</span>
        <button class="rounded-full bg-white px-4 py-2 text-purple-600 shadow-md transition-all duration-300 hover:bg-purple-100 hover:text-purple-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

Table of Contents コンポーネント

ソーシャルメディアインターフェイス用のレスポンシブな目次コンポーネントで、アーストーンを使用したダークモード UI とシンプルなレイアウトで設計されています。Tailwind CSSを使用したダークテーマをサポートし、JavaScriptなしのHTML専用です。

開けるプレビュー

                <nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
  <h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
    <li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
    <li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
    <li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
    <li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
    <li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
    <li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
    <li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
  </ul>
</nav>

RetroDashboardコンポーネント

グレースケールスキームとダークモードをサポートするレトロ/ビンテージダッシュボードコンポーネント。この複雑なコンポーネントは、複数のインタラクティブ要素、レスポンシブデザインを特徴とし、スタイリングにTailwind CSSを使用しています。ダッシュボードやコントロールパネルに適しています。

開けるプレビュー

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8 font-mono">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold mb-8 text-center uppercase tracking-widest">
      <span class="text-gray-600 dark:text-gray-400">RetroDASH</span>
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
      <!-- Card 1: Sales Overview -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Sales Overview</h2>
        <div class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">$12,450</div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Total Sales This Month</p>
        <div class="h-24 bg-gray-100 dark:bg-gray-700 rounded mt-4"></div>
      </div>

      <!-- Card 2: User Activity -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">User Activity</h2>
        <div class="flex items-center justify-between mb-2">
          <span class="text-3xl font-extrabold text-green-600 dark:text-green-400">2,345</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">Active Users</span>
        </div>
        <ul class="space-y-2 mt-4">
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe logged in</span>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith viewed report</span>
          </li>
        </ul>
      </div>

      <!-- Card 3: Traffic Sources -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Traffic Sources</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
          <li class="flex justify-between items-center">
            <span>Direct</span>
            <span class="font-bold">40%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Referral</span>
            <span class="font-bold">30%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Organic Search</span>
            <span class="font-bold">20%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Social Media</span>
            <span class="font-bold">10%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Main Data Visualization Area -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-8">
      <h2 class="text-2xl font-bold mb-4 text-gray-700 dark:text-gray-300">Revenue Trends</h2>
      <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-400">
        <p class="text-lg">Graph/Chart Placeholder</p>
      </div>
    </div>

    <!-- Tabbed Interface -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
      <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Overview
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 dark:text-blue-400 focus:outline-none">
            Analytics
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Settings
          </button>
        </nav>
      </div>
      <div class="text-gray-700 dark:text-gray-300">
        <p>Detailed analytics content goes here. This is a placeholder for a complex data table or more interactive charts.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 1</h3>
            <p>Value: <span class="font-semibold">1,234</span></p>
          </div>
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 2</h3>
            <p>Value: <span class="font-semibold">56.78%</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

類似の配色、レスポンシブデザイン、ダークテーマのサポートを備えた複雑なレトロ/ビンテージハンバーガーメニューコンポーネント。

開けるプレビュー

                <div class="bg-gradient-to-br from-purple-800 via-pink-700 to-red-600 font-mono min-h-screen p-8">

  <!-- Retro Header -->
  <header class="flex justify-between items-center mb-12">
    <div class="text-white text-4xl font-bold tracking-wider">BYTE BLVD</div>
    <div class="md:hidden">
      <input type="checkbox" id="menu-toggle" class="hidden">
      <label for="menu-toggle" class="block cursor-pointer group">
        <div class="w-8 h-1 bg-white mb-1 transition-all duration-300 group-hover:bg-yellow-400"></div>
        <div class="w-8 h-1 bg-white mb-1 transition-all duration-300 group-hover:bg-yellow-400"></div>
        <div class="w-8 h-1 bg-white transition-all duration-300 group-hover:bg-yellow-400"></div>
      </label>
      
      <!-- Mobile Menu Overlay -->
      <div class="fixed inset-0 bg-black bg-opacity-75 z-50 transform -translate-x-full transition-transform duration-300 ease-in-out" id="mobile-menu">
        <div class="flex justify-end p-4">
          <label for="menu-toggle" class="text-white text-4xl cursor-pointer">&times;</label>
        </div>
        <nav class="flex flex-col items-center justify-center h-full space-y-8">
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Home</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Articles</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">About</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Contact</a>
        </nav>
      </div>
    </div>
    
    <!-- Desktop Navigation -->
    <nav class="hidden md:block">
      <ul class="flex space-x-8">
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Home</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Articles</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">About</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <main class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Featured Article Card -->
    <div class="md:col-span-2 bg-purple-700 dark:bg-purple-900 rounded-lg shadow-lg overflow-hidden border-4 border-yellow-400 transform transition-transform duration-300 hover:scale-105">
      <img src="https://picsum.photos/800/400?random=1" alt="Featured Article" class="w-full h-64 object-cover">
      <div class="p-6">
        <h2 class="text-yellow-400 text-3xl font-bold mb-3">The Pixelated Past: A Dive into 8-bit Gaming</h2>
        <p class="text-white text-lg leading-relaxed">Explore the golden age of video games, from classic consoles to arcade masterpieces. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="mt-5 inline-block bg-yellow-400 text-purple-900 font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition-colors duration-300">Read More</a>
      </div>
    </div>

    <!-- Sidebar / Recent Posts -->
    <aside class="bg-pink-600 dark:bg-pink-800 rounded-lg shadow-lg p-6 border-4 border-yellow-400">
      <h3 class="text-yellow-400 text-2xl font-bold mb-6">Recent Transmissions</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Decoding Early Web Design</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">The Rise of Synthwave Music</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Vintage Tech Gadgets Revisited</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Analog Photography Revival</a></li>
      </ul>

      <div class="mt-8">
        <h3 class="text-yellow-400 text-2xl font-bold mb-4">Retro Subscribers</h3>
        <div class="flex -space-x-2 overflow-hidden">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/men/82.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/women/62.jpg" alt="retro avatar">
        </div>
      </div>
    </aside>
  </main>

  <!-- Footer -->
  <footer class="mt-12 text-center text-white text-opacity-80">
    <p>&copy; 2023 BYTE BLVD. All rights reserved. Relive the glory days!</p>
  </footer>

  <style>
    /* Custom CSS for Hamburger Menu Animation */
    #menu-toggle:checked + label div:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
    }
    #menu-toggle:checked + label div:nth-child(2) {
      opacity: 0;
    }
    #menu-toggle:checked + label div:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
    }
    #menu-toggle:checked ~ #mobile-menu {
      transform: translateX(0%);
    }
  </style>
</div>

ソーシャルログインコンポーネント

Glassmorphismスタイルのグレースケールのソーシャルログインコンポーネントで、ダークモードをサポートしており、eコマースサイトに適しています。デザインはレスポンシブで、すりガラスの効果とぼかしが含まれています。JavaScriptは含まれていません。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-8 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-5xl border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 mx-4">
    <div class="absolute inset-0 rounded-2xl pointer-events-none" style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8">Sign in to unlock exclusive shopping features.</p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google icon" class="h-6 w-6 mr-3">
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" alt="Facebook icon" class="h-6 w-6 mr-3">
          Sign in with Facebook
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter icon" class="h-6 w-6 mr-3">
          Sign in with Twitter
        </button>
      </div>

      <div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-gray-800 dark:text-white font-medium hover:underline">Sign up</a></p>
      </div>
    </div>
  </div>
</div>

ソーシャル共有ボタンコンポーネント

ダークモードをサポートするダッシュボード用のシンプルでレスポンシブな3Dグレースケールソーシャル共有ボタンコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
    <!-- Facebook -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
    </a>
    
    <!-- Twitter -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
    </a>
    
    <!-- LinkedIn -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
    </a>
    
    <!-- Instagram -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
    </a>
  </div>
</div>

メディア埋め込みコンポーネント - ミニマリストのアーストーン

ダッシュボード用のミニマリストメディア埋め込みコンポーネントで、アースカラーを使用したレスポンシブデザインとダークテーマのサポートを備えています。ビデオプレーヤー、タイトル、説明、チャンネル情報が表示されます。

開けるプレビュー

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="aspect-w-16 aspect-h-9 mb-4">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-lg"></iframe>
  </div>
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Engaging Data Visualization Techniques</h3>
  <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore innovative ways to present complex data for better insights and decision-making.</p>
  <div class="flex items-center">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Channel Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-green-500">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Data Insights Pro</span>
  </div>
</div>

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

レトロ/ビンテージデザイン、類似の配色、ダークテーマのサポートを備えたレスポンシブ製品カードコンポーネントで、ダッシュボードに適しています。デザインには、画像と製品の詳細のプレースホルダーが含まれています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8">
    Retro Product Dashboard
  </h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Synthwave Mixer</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A classic piece of audio equipment, perfect for capturing that 80s vibe.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$299.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=2" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Neon Arcade Joystick</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the glory days of arcade gaming with this vibrant joystick.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$49.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=3" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Classic Cassette Player</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Enjoy your favorite mixtapes with this retro-inspired portable player.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=4" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Gaming Console</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blast from the past, featuring iconic games and a nostalgic design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$149.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=5" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Retro Boombox Speaker</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Powerful sound with a retro aesthetic, perfect for any party.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$129.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=6" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Pixel Art Smartwatch</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blend of modern tech and retro pixel art design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

ヒートマップコンポーネント

補色付きのレスポンシブ3Dヒートマップコンポーネントで、ブログやコンテンツの消費に適しており、ダークモードをサポートしています。

開けるプレビュー

                <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Monthly Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1 ">
    <!-- Days of the week -->
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sun</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Mon</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Tue</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Wed</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Thu</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Fri</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sat</div>

    <!-- Heatmap cells (example for 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      `<div key={i} class="relative w-8 h-8 md:w-10 md:h-10 transform perspective-1000 -rotate-x-15 rotate-y-15 p-1">
        <div class="absolute inset-0 rounded-md shadow-lg transition-all duration-300 transform
          ${i % 7 === 0 ? "bg-red-500 dark:bg-red-700" : ""}
          ${i % 7 === 1 ? "bg-red-600 dark:bg-red-800" : ""}
          ${i % 7 === 2 ? "bg-orange-500 dark:bg-orange-700" : ""}
          ${i % 7 === 3 ? "bg-orange-600 dark:bg-orange-800" : ""}
          ${i % 7 === 4 ? "bg-red-700 dark:bg-red-900" : ""}
          ${i % 7 === 5 ? "bg-red-800 dark:bg-red-950" : ""}
          ${i % 7 === 6 ? "bg-orange-700 dark:bg-orange-900" : ""}
          hover:scale-110 hover:rotate-x-0 hover:rotate-y-0
          group-hover:opacity-75
          flex items-center justify-center
          text-white text-xs font-bold
          ">
          ${i + 1}
        </div>
      </div>`
    )).join("")}
  </div>
  <div class="mt-4 flex justify-between text-gray-600 dark:text-gray-400">
    <span>Less</span>
    <div class="flex space-x-1">
      <div class="w-4 h-4 bg-red-400 dark:bg-red-600 rounded"></div>
      <div class="w-4 h-4 bg-red-500 dark:bg-red-700 rounded"></div>
      <div class="w-4 h-4 bg-red-600 dark:bg-red-800 rounded"></div>
      <div class="w-4 h-4 bg-red-700 dark:bg-red-900 rounded"></div>
      <div class="w-4 h-4 bg-red-800 dark:bg-red-950 rounded"></div>
    </div>
    <span>More</span>
  </div>
</div>

価格表示コンポーネント

レスポンシブデザイン、ダークモードのサポート、鮮やかな配色を備えた価格表示コンポーネント。

開けるプレビュー

                <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-6 py-8">
      <h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
      <div class="flex justify-center items-baseline mb-8">
        <span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
        <span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
        </li>
      </ul>
      <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
        Get Started
      </button>
    </div>
  </div>
</div>

1 ... 113 114 115 116 117 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント