検索コンポーネント

すべてのコンポーネント

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

レトロサイドバーナビゲーション

ビジネス/企業のWebサイト向けのレスポンシブでシンプルなレトロ/ビンテージパステルカラーのサイドバーナビゲーションコンポーネントで、ダークモードがサポートされています。

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
    <div>
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
      <nav>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
          Dashboard
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Analytics
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Reports
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
    </div>
  </div>

  <!-- Content Area (for demonstration purposes) -->
  <div class="flex-1 p-8">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
    <p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
  </div>
</div>

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

マイクロインタラクション、グレースケールの配色、適度な複雑さ、レスポンシブデザイン、ダークテーマのサポートを備えたeコマース用のメディアコンポーネント。

開けるプレビュー

                <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
  <div class="relative">
    <img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
      alt="Product Image">
    <div
      class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
      <svg class="w-12 h-12" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
        </path>
      </svg>
    </div>
  </div>
  <div class="px-4 py-3">
    <h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
    <div class="flex items-center justify-between mt-3">
      <span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
      <button
        class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Glassmorphismオーディオプレーヤー

ダッシュボード用の鮮やかな色のGlassmorphismオーディオプレーヤーで、ダークモードのサポートで応答性があります。JavaScript はありません。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg max-w-sm w-full border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/id/1040/80/80" alt="Album Art">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Ocean Waves</h3>
        <p class="text-sm text-purple-700 dark:text-purple-300">Relaxation Sounds</p>
      </div>
    </div>
    <div class="relative mb-4">
      <div class="w-full bg-purple-200 rounded-full h-2 dark:bg-gray-600">
        <div class="bg-gradient-to-r from-indigo-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
      </div>
      <div class="flex justify-between text-xs text-purple-800 dark:text-purple-200 mt-1">
        <span>2:10</span>
        <span>3:05</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
      <button class="bg-gradient-to-r from-indigo-600 to-pink-600 text-white p-3 rounded-full shadow-lg focus:outline-none transform hover:scale-105 transition duration-300">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"></path>
        </svg>
      </button>
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

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

Glassmorphismデザイン、補色スキーム、およびダークモードサポートを備えたレスポンシブユーザーメンションコンポーネントで、ビジネスWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl p-6 w-full max-w-sm border border-white border-opacity-30 dark:border-gray-700 shadow-lg">
    <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 text-center">User Mentions</h3>
    <div class="space-y-4">
      
      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">John Doe <span class="text-sm text-gray-100 dark:text-gray-300">(CEO)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Mentioned you in a project update.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Jane Smith <span class="text-sm text-gray-100 dark:text-gray-300">(Designer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Asked your opinion on a new design.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/18.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Robert Brown <span class="text-sm text-gray-100 dark:text-gray-300">(Developer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Assigned you a task in Jira.</p>
        </div>
      </div>

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

パスワードリセットコンポーネント

Skeuomorphic Passwordリセットコンポーネント、Analogousカラースキームとダークモードをサポートするソーシャルメディア用。

開けるプレビュー

                <div class="min-h-screen py-6 flex flex-col justify-center sm:py-12 bg-gradient-to-br from-blue-100 via-blue-200 to-cyan-100 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Password Reset</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7 dark:text-gray-200">
            <p>Enter your email to receive a password reset link.</p>
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-gray-100 dark:focus:border-blue-500" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
            </div>
            <div class="relative">
              <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 shadow-md">Reset Password</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Back_To_Top_Button

レトロ/ビンテージ - 類似の配色でブログ/コンテンツを消費するためのノスタルジックなトップに戻るボタンコンポーネント。レスポンシブモードとダークモードをサポートする複雑なデザイン。

開けるプレビュー

                <div class="fixed bottom-5 right-5">
  <a href="#"
    class="group flex items-center justify-center p-4 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 text-white shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:from-purple-700 dark:via-pink-700 dark:to-red-700 dark:focus:ring-purple-800"
    aria-label="Back to top">
    <svg class="h-8 w-8 transition-transform duration-300 group-hover:-translate-y-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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </a>
</div>

2要素認証コンポーネント

Glassmorphism Dashboardの2要素認証コンポーネントで、補色の配色とダークモードがサポートされています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-dark to-purple-light dark:from-gray-900 dark:to-black">
  <div class="relative p-8 rounded-xl shadow-lg bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-opacity-20 border-white max-w-md w-full mx-4">
    <div class="absolute inset-0 bg-white bg-opacity-5 dark:bg-black dark:bg-opacity-5 rounded-xl pointer-events-none"></div>
    
    <h2 class="text-3xl font-bold text-white mb-6 text-center">🔐 Two-Factor Authentication</h2>
    
    <p class="text-white text-opacity-80 mb-8 text-center">Please enter the 6-digit code from your authenticator app.</p>
    
    <div class="flex justify-center space-x-4 mb-8">
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
    </div>
    
    <button class="w-full py-3 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-70 dark:bg-purple-700 dark:hover:bg-purple-800">
      Verify Code
    </button>
    
    <p class="text-white text-opacity-70 text-center mt-6 text-sm">
      Didn

Glassmorphism はコンポーネントを形成します

Glassmorphism は、アースカラー、レスポンシブデザイン、およびブログ/コンテンツWebサイト用のダークテーマサポートを備えたコンポーネントを形成します。

開けるプレビュー

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-8 w-full max-w-md border border-stone-200 dark:border-stone-700">
    <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center">Contact Us</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400"></textarea>
      </div>
      <button type="submit" class="w-full bg-stone-700 dark:bg-stone-600 text-white py-3 rounded-lg font-semibold hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-stone-400">
        Send Message
      </button>
    </form>
  </div>
</div>

スキューモーフィックマップコンポーネント

スキューモーフィックなデザイン、アーストーンの配色、ダークモードのサポートを備えたシンプルでレスポンシブなマップコンポーネントで、ポートフォリオに適しています。

開けるプレビュー

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-200 to-stone-400 dark:from-stone-800 dark:to-stone-950 shadow-2xl rounded-3xl border-4 border-stone-500 dark:border-stone-700 max-w-4xl mx-auto my-8"> <div class="w-full h-64 md:h-96 rounded-2xl overflow-hidden border-2 border-stone-600 dark:border-stone-400 shadow-inner"> <img src="https://picsum.photos/seed/map/800/600" alt="Skeuomorphic Map" class="w-full h-full object-cover grayscale brightness-90 contrast-120"> </div> <div class="mt-6 text-center"> <h3 class="text-2xl md:text-3xl font-serif text-stone-800 dark:text-stone-200 drop-shadow-md">Location Details</h3> <p class="mt-2 text-md md:text-lg text-stone-700 dark:text-stone-300 font-sans">123 Rustic Road, Earthville</p> <button class="mt-5 px-6 py-3 bg-gradient-to-r from-amber-700 to-amber-900 text-white font-bold rounded-full shadow-lg hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50 transition transform hover:-translate-y-1 active:translate-y-0"> View Large Map </button> </div> <div class="mt-8 flex justify-around items-center px-4"> <div class="text-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Explorer </p> </div> <div class="text-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Cartographer </p> </div> </div> </div>

Eコマース注文プログレスバー

ダークモードをサポートするeコマース用のレスポンシブプログレスバーコンポーネントで、単色デザインが特徴です。JavaScriptは不要で、HTMLとTailwind CSSのみ。

開けるプレビュー

                <div class="dark:bg-gray-900 min-h-screen p-4 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Order Progress</h2>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Order Placed</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">100%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Processing</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Shipped</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Out for Delivery</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%;"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Delivered</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">0%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%;"></div>
      </div>
    </div>
  </div>
</div>

1 ... 103 104 105 106 107 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント