検索コンポーネント

すべてのコンポーネント

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

アラートメッセージコンポーネント

マイクロインタラクション、パステルカラースキーム、複雑なデザイン、ビジネス/企業目的、ダークモードのサポート、JavaScriptなしを備えたレスポンシブアラートメッセージコンポーネント。

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-8 w-8 text-teal-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-4">
          <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Message Sent Successfully</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your message has been sent to the recipient. We will notify you when they respond.</p>
        </div>
      </div>
      <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-400 text-base font-medium text-white hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:col-start-2 sm:text-sm">
          Dismiss
        </button>
        <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:mt-0 sm:col-start-1 sm:text-sm">
          Learn More
        </button>
      </div>
    </div>
  </div> Achilles</div>

インタラクティブポートフォリオコンポーネント

マイクロインタラクションとパステルカラースキームを備えたレスポンシブポートフォリオコンポーネントで、Tailwind CSSによるダークモードをサポートします。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About Me</h3>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Your Name</h4>
                <p class="text-gray-600 dark:text-gray-400">A short bio or description about yourself and your work.</p>
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 transition duration-300 ease-in-out">Contact Me</button>
</div>

スキューモーフィックナビゲーションコンポーネント

スキューモーフィックスタイルで設計されたナビゲーションコンポーネントで、補色の配色が特徴で、データの視覚化とコントロールパネルを備えたダッシュボードに適しています。これには、ユーザーエンゲージメントのためのインタラクティブな要素が含まれています。

開けるプレビュー

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

複雑なダッシュボードヘッダー

ダッシュボード用に設計された、3Dデザイン要素、アースカラーの配色を備えた複雑で応答性の高いヘッダーコンポーネント。Tailwind CSSを使用したダークテーマのサポートが含まれており、デモ画像/アバターにはpicsum.photosと randomuser.me を使用します。

開けるプレビュー

                <header class="bg-gradient-to-br from-gray-700 via-gray-800 to-gray-900 text-white dark:from-gray-900 dark:via-gray-950 dark:to-black shadow-2xl">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-10 w-10 text-green-500 dark:text-green-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 2zm9 9b2 0 002-2v-2a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2h2z"></path></svg>
        </div>
        <div class="ml-3">
          <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 dark:from-green-300 dark:to-blue-400">Dashboard</h1>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Overview</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Reports</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Analytics</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Settings</a>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Settings</a>
    </div>
  </div>
</header>

ショッピングカートコンポーネント

eコマースに適した、鮮やかな色彩の現実世界のデザインを模倣したシンプルなレスポンシブショッピングカートコンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
    </ul>
    <div class="mt-6">
        <button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
            Checkout
        </button>
    </div>
</div>

VibrantGlass射定チャート

ブログやコンテンツサイトに適した、鮮やかな色のシンプルなGlassmorphismチャートコンポーネントです。このコンポーネントはレスポンシブで、Tailwind CSS を使用したダークテーマのサポートが含まれています。

開けるプレビュー

                <div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

3Dギャラリーコンポーネント

e コマース用に設計された複雑なレスポンシブ 3D ギャラリーコンポーネントで、ダークテーマと補色スキームが特徴です。

開けるプレビュー

                <div class="max-w-7xl mx-auto p-6">
    <h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
                <button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
                <button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
                <button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
                <button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 5 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
                <button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 6 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

アクティビティフィードコンポーネント

レトロ/ビンテージスタイルのアクティビティフィードコンポーネントで、高彩度の色、インタラクティブ要素、ダークモードのサポートを備えた作品や製品を紹介するために設計されています。

開けるプレビュー

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center text-violet-600 dark:text-violet-300 mb-6">Activity Feed</h2>
    <div class="space-y-4">
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-violet-600 dark:border-violet-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Added a new project: <span class="text-violet-600 dark:text-violet-300">Awesome Website</span></p>
                <p class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-600 dark:border-green-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new image.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">1 day ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-600 dark:border-blue-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Emily Carter</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">3 days ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-600 dark:border-red-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Sarah Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">4 days ago</p>
            </div>
        </div>
    </div>
    <button class="mt-6 w-full py-2 px-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg shadow focus:outline-none transition duration-200 dark:bg-violet-300 dark:hover:bg-violet-200">Load More</button>
</div>

ユーザーメンションコンポーネント

ソーシャルメディアネットワーキングインターフェイス用のニューモーフィズムとアーストーンでスタイル化されたレスポンシブユーザーメンションコンポーネントで、ダークテーマのサポートを備えています。

開けるプレビュー

                <div class="max-w-md mx-auto py-8">
    <!-- Title -->
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>

    <!-- Mentions List -->
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
                <p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

ミニマリストビデオプレーヤー

Tailwind CSSを使用してHTMLでコード化されたビデオプレーヤーコンポーネント。ダッシュボードでの使用を目的とした、グレースケールの配色を使用したミニマリストデザインです。これは、複数のインタラクティブ要素を持つ複雑なコンポーネントであり、ダークモードのサポートにより完全にレスポンシブです。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <!-- Video Area -->
    <div class="relative" style="padding-top: 56.25%;">
      <video controls class="absolute top-0 left-0 w-full h-full object-cover">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>

    <!-- Controls and Info Area -->
    <div class="p-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Video Title Goes Here</h3>
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </button>
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4">
        <div class="bg-gray-700 dark:bg-gray-300 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>

      <!-- Play/Pause Button (example - actual video controls are built-in) -->
      <div class="flex justify-center">
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 px-6 py-2 rounded-full focus:outline-none">
          Play
        </button>
      </div>

      <!-- Additional Info/Metadata -->
      <div class="mt-6 text-gray-600 dark:text-gray-400 text-sm">
        <p>Views: 1.2M | Uploaded: 3 days ago</p>
      </div>
    </div>
  </div>
</div>

1 ... 193 194 195 196 197 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント