検索コンポーネント

すべてのコンポーネント

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

Neumorphic Pagination コンポーネント

ブログインターフェイス用に Neumorphism でスタイル設定されたレスポンシブでインタラクティブなページネーションコンポーネントで、ダークモードをサポートしています。

                <div class="flex items-center justify-center py-8">  <nav aria-label="Pagination" class="hidden md:flex space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">1</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">2</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">3</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <nav aria-label="Pagination" class="flex md:hidden space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2">    <span class="text-gray-800 dark:text-gray-200">Page</span>    <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1">    <span class="text-gray-800 dark:text-gray-200">of 3</span>  </div></div>

データ視覚化コンポーネント

アースカラーとシンプルなレイアウトを特徴とするダークテーマを備えたレトロなビンテージスタイルのデータ視覚化ダッシュボードコンポーネント。

開けるプレビュー

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-amber-300 mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">User Statistics</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Users: 250</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Data Visualization" class="w-full rounded-lg mt-2">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">Sales Overview</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Sales: $10,000</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Sales Overview" class="w-full rounded-lg mt-2">
        </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4 mt-4">
        <h2 class="text-xl text-green-200">Recent Activity</h2>
        <ul class="text-gray-300 dark:text-gray-400">
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User1 logged in</span>
            </li>
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User2 made a purchase</span>
            </li>
            <li class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User3 logged out</span>
            </li>
        </ul>
    </div>
</div>

タグクラウドコンポーネント

データ視覚化ダッシュボード用の鮮やかな色の 3D タグクラウドコンポーネント。

開けるプレビュー

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
  <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-blue-700 transform transition duration-300 hover:scale-110 hover:rotate-3" style="perspective: 1000px; transform: rotateY(15deg) rotateX(5deg);">Marketing Analysis</span>
  <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-red-700 transform transition duration-300 hover:scale-110 hover:-rotate-6" style="perspective: 1000px; transform: rotateY(-10deg) rotateX(-3deg);">Sales Performance</span>
  <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-green-700 transform transition duration-300 hover:scale-110 hover:rotate-4" style="perspective: 1000px; transform: rotateY(5deg) rotateX(10deg);">Customer Feedback</span>
  <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-yellow-700 transform transition duration-300 hover:scale-110 hover:-rotate-4" style="perspective: 1000px; transform: rotateY(-5deg) rotateX(8deg);">Product Development</span>
  <span class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-purple-700 transform transition duration-300 hover:scale-110 hover:rotate-2" style="perspective: 1000px; transform: rotateY(10deg) rotateX(-6deg);">Financial Reporting</span>
  <span class="bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-pink-700 transform transition duration-300 hover:scale-110 hover:-rotate-2" style="perspective: 1000px; transform: rotateY(-8deg) rotateX(4deg);">Operational Efficiency</span>
  <span class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-indigo-700 transform transition duration-300 hover:scale-110 hover:rotate-5" style="perspective: 1000px; transform: rotateY(12deg) rotateX(-2deg);">Market Trends</span>
</div>

ビデオプレーヤーコンポーネント

マテリアルデザインの原則を使用して設計されたシンプルなビデオプレーヤーコンポーネントで、レスポンシブレイアウトとダークテーマがサポートされています。

開けるプレビュー

                <div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-8">
    <div class="relative overflow-hidden">
        <video class="w-full h-auto" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mt-1">This is a short description of the video content. It provides useful information about what the viewer can expect.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <div>
                <p class="text-gray-800 dark:text-white">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Uploaded</p>
            </div>
        </div>
    </div>
</div>

ブルータリズムトップに戻る

グレースケールの色と Tailwind CSS を使用したブルータリズムの Back to Top ボタンコンポーネント。応答性が高く、ダークモードをサポートしています。

開けるプレビュー

                <button class="fixed bottom-4 right-4 bg-black text-white border-2 border-black group dark:bg-white dark:text-black dark:border-white">
  <span class="block px-6 py-3 text-xl font-bold group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all">
    ⬆️
  </span>
</button>

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

スキューモーフィックスタイルで設計されたスティッキーナビゲーションコンポーネントで、レスポンシブデザインと 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>

レトロ/ビンテージCAPTCHAコンポーネント

ソーシャルメディアインターフェイス用に設計されたレトロなスタイルのCAPTCHAコンポーネントで、鮮やかな色と複雑なレイアウト、レスポンシブデザイン、ダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-900 dark:to-indigo-800 rounded-lg shadow-lg max-w-md w-full">
    <h2 class="text-white text-2xl font-bold mb-4">Verify You're Human</h2>
    <img src="https://picsum.photos/400/200?random=1" alt="Nostalgic Background" class="rounded-lg mb-4" />
    <div class="flex flex-col items-center text-center mb-4">
        <p class="text-white mb-2">To continue, please solve the puzzle below:</p>
        <div class="flex flex-row space-x-2 bg-white p-2 rounded-lg shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-violet-500 dark:border-violet-300" />
            <p class="text-gray-800 font-semibold">Identify the vintage item:</p>
            <img src="https://picsum.photos/100/100?random=2" alt="Vintage Item" class="w-10 h-10 rounded-lg border-2 border-pink-500 dark:border-pink-300" />
        </div>
    </div>
    <input type="text" placeholder="Your Answer" class="w-full p-2 text-violet-700 dark:text-violet-300 bg-white dark:bg-gray-800 rounded-lg mb-4" />
    <button class="bg-fuchsia-500 hover:bg-fuchsia-600 dark:bg-fuchsia-700 dark:hover:bg-fuchsia-800 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out">Submit</button>
</div>

ページネーションコンポーネント

レトロ/ビンテージデザインスタイル、トライアドカラースキーム、シンプルな複雑さ、ブログ/コンテンツ目的、Tailwind CSSを使用したページネーションコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

開けるプレビュー

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:text-white">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Previous
  </a>
  <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md dark:bg-indigo-600 dark:text-white dark:border-indigo-700">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    3
  </a>
  <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
    ...
  </span>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    8
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    9
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    10
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Next
  </a>
</nav>

インタラクティブコンポーネントコンポーネント

Glassmorphism デザイン、パステル調の配色、ブログコンテンツ用のシンプルなレイアウトを備えたインタラクティブなコンポーネントです。応答性が高く、ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Blog Post Title</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>This is a simple interactive component designed for blog content, featuring a Glassmorphism style with pastel colors.</p>
            <p>It is responsive and supports dark mode.</p>
          </div>
          <div class="pt-4 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <a href="#" class="text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-500">Read More &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

シンプルな360ビューア(Glassmorphismグレースケール)

シンプルでレスポンシブな 360 度ビューアコンポーネントで、グレースケールの glassmorphism デザインで、e コマースに適しています。ダークモードをサポートします。

開けるプレビュー

                ```html
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <!-- 360 Viewer Area (Placeholder) -->
    <div class="relative w-full h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
      <span class="text-gray-600 dark:text-gray-400 text-sm">360° Viewer Placeholder</span>
      <!-- In a real implementation, a JavaScript library or iframe would go here -->
    </div>

    <!-- Product Info -->
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Brief product description goes here.</p>
      <div class="flex justify-between items-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">$99.99</span>
        <button class="px-4 py-2 bg-gray-700 text-white text-xs font-semibold rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
      </div>
    </div>
  </div>
</div>
```

1 ... 234 235 236 237 238 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント