検索コンポーネント

すべてのコンポーネント

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

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

グレースケールの配色を特徴とするレスポンシブ3Dデザインのソーシャルメディアレイアウトコンポーネント。ソーシャルネットワーキングインターフェースに適しています。

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
        <h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">  
    </div>
    <div class="text-gray-600 dark:text-gray-300">
        <p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
    </div>
</div>

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

ダークテーマとアーストーンの色を使用して、eコマース用に設計された魅力的なマイクロインタラクションを備えたレスポンシブナビゲーションバー。

開けるプレビュー

                <nav class="bg-brown-800 text-white dark:bg-brown-900 shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <a href="#" class="text-2xl font-bold hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Shop</a>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">
                <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full">
            </a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Cart</a>
        </div>
        <button class="md:hidden text-brown-200 hover:text-brown-500 dark:hover:text-brown-300 transition-colors focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
</nav>

<!-- Responsive adjustments for mobile -->
<div class="md:hidden">
    <ul class="bg-brown-800 text-white dark:bg-brown-900 p-4 space-y-2">
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a></li>
    </ul>
</div>

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

単色の配色を使用したダークモード用に設計されたレスポンシブソーシャルログインコンポーネント。インタラクティブな機能を備えたブログやコンテンツの消費に適しています。

開けるプレビュー

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

ミニマリストEコマースログインフォーム

パステルカラーのミニマリストでフラットなデザインのログインフォームで、eコマースサイト向けに設計されています。シンプルでレスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

開けるプレビュー

                <div
      class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
    >
      <div
        class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
      >
        <h2
          class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
        >
          Login
        </h2>
        <form>
          <div class="mb-4">
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              name="email"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-6">
            <label
              for="password"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your password"
            />
          </div>
          <button
            type="submit"
            class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
          >
            Login
          </button>
        </form>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
          </p>
        </div>
      </div>
    </div>

製品ギャラリーコンポーネント

ダークモードのレスポンシブ製品ギャラリーコンポーネント

開けるプレビュー

                <div class="bg-gray-900 py-10">
  <div class="container mx-auto px-4">
    <h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

ミニマリストCAPTCHA

ダークモードをサポートするレスポンシブCAPTCHAコンポーネントで、パステルカラーのミニマルなデザインが特徴です。シンプルなチェックボックスとテキストのプレースホルダーが含まれています。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">CAPTCHA Verification</h2>
        <div class="flex items-center">
            <input type="checkbox" id="robot-checkbox" class="form-checkbox h-5 w-5 text-blue-600">
            <label for="robot-checkbox" class="ml-2 text-gray-700 dark:text-gray-300">I am not a robot</label>
        </div>
         <div class="mt-4 p-3 bg-gray-200 dark:bg-gray-700 rounded">
            <p class="text-sm text-gray-600 dark:text-gray-400">CAPTCHA will appear here</p>
        </div>
    </div>
</div>

スキューモーフィックモーダルコンポーネント

複雑なレスポンシブモーダルモーダルコンポーネントで、eコマース用の補色を使用したスキューモーフィックデザインでスタイリングされています。

開けるプレビュー

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-opacity-50 bg-gray-900 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-11/12 md:w-1/3">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Item Details</h2>
    <div class="flex justify-center my-4">
      <img src="https://picsum.photos/200/300" alt="Product Image" class="rounded-lg shadow-md" />
    </div>
    <p class="text-gray-600 dark:text-gray-300">This is where you can detail the product features, specifications, and other necessary information to help customers make an informed decision.</p>
    <ul class="my-4 text-gray-700 dark:text-gray-200">
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 1</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 2</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 3</li>
    </ul>
    <div class="flex items-center justify-between my-4">
      <span class="text-lg font-bold text-gray-800 dark:text-gray-100">$19.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
    </div>
    <div class="flex justify-center my-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" />
      <span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
    </div>
    <button class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 rounded">Close</button>
  </div>
</div>

Brutalist ダッシュボードマップコンポーネント

鮮やかな色、高コントラスト、複雑なインタラクティブ要素、レスポンシブデザイン、Tailwind CSS を使用したダークテーマのサポートを備えたブルータリズムスタイルのダッシュボードマップコンポーネント。

開けるプレビュー

                <div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Map Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
        <div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
          [Interactive Map Placeholder]
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric A</h3>
            <p class="text-xl text-green-600 dark:text-green-400">1,245</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric B</h3>
            <p class="text-xl text-red-600 dark:text-red-400">489</p>
          </div>
        </div>
      </div>

      <!-- Data Visualization Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
        <div class="space-y-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Sales Performance</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">User Engagement</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
      <h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
      <table class="min-w-full border-collapse border border-black dark:border-lime-400">
        <thead>
          <tr>
            <th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>John Doe</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
          </tr>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
               <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>Jane Smith</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Eコマースダッシュボードコンポーネント

Tailwind CSSのSkeuomorphism、鮮やかな色、シンプルなレイアウトを備えたEコマースダッシュボードコンポーネントで、レスポンシブテーマとダークテーマがサポートされています。

開けるプレビュー

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
        <p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
        <p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
        <p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </div>
</div>

レトロなダッシュボードアコーディオン

補完的な配色と複雑な複雑さを備えたダッシュボード用のレトロ/ビンテージアコーディオンコンポーネント。レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが含まれています。JavaScript はありません。画像はpicsum.photos経由、アバターは randomuser.me 経由。

開けるプレビュー

                <div class="max-w-md mx-auto rounded-none overflow-hidden shadow-lg bg-gray-100 dark:bg-gray-800 border-4 border-purple-500 dark:border-yellow-500">
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 1
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 1. This section provides an overview of key metrics with interactive charts and graphs.</p>
      <div class="mt-4 grid grid-cols-2 gap-4">
        <div>
          <img src="https://picsum.photos/150/100" alt="Random Image" class="rounded border-2 border-purple-500 dark:border-yellow-500">
        </div>
        <div>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400">Metric A</h4>
          <p class="text-sm">Value: 1200</p>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400 mt-2">Metric B</h4>
          <p class="text-sm">Value: 75%</p>
        </div>
      </div>
    </div>
  </div>
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 2
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 2. Detailed reports and customizable views.</p>
        <div class="mt-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500 dark:border-yellow-500">
            <div>
                <p class="font-semibold text-purple-600 dark:text-yellow-400">User Name</p>
                <p class="text-sm">Last activity: 2 hours ago</p>
            </div>
        </div>
    </div>
  </div>
    <div>
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 3
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 3. Settings and configuration options.</p>
        <ul class="list-disc list-inside mt-2">
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>
  </div>
</div>

1 ... 155 156 157 158 159 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント