検索コンポーネント

すべてのコンポーネント

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

タイムラインコンポーネント

グレースケールの配色でスキューモーフィックなスタイルでデザインされたシンプルなレスポンシブタイムラインコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークテーマのサポートを特徴とし、スタイリングにTailwind CSSを使用します。

開けるプレビュー

                <div class="max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Our Journey</h2>
    <div class="border-l-2 border-gray-300 dark:border-gray-600">
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-01-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Launched our first product</h3>
                <p class="text-gray-600 dark:text-gray-400">We successfully launched our first product to the market, marking a significant milestone for our company.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Expanded our services</h3>
                <p class="text-gray-600 dark:text-gray-400">We expanded our service offerings to better meet the needs of our clients and enhance our market presence.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-12-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Achieved 1000 clients</h3>
                <p class="text-gray-600 dark:text-gray-400">We reached a significant achievement of acquiring our 1000th client, showcasing our growth and success.</p>
            </div>
        </div>
    </div>
</div>

OAuth ボタンコンポーネント

ダークモード用に設計されたレスポンシブなOAuthボタンコンポーネントで、鮮やかな配色で、プロフェッショナルなビジネスWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-6">
    <h2 class="text-4xl font-bold text-white mb-6">Login with OAuth</h2>
    <div class="flex flex-col gap-4 w-full max-w-md">
        <a href="#" class="flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Facebook Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="LinkedIn Logo" class="w-6 h-6 mr-3" />
            <span>Continue with LinkedIn</span>
        </a>
    </div>
    <p class="mt-6 text-gray-400">Or</p>
    <a href="#" class="mt-2 text-white underline">Login with Email</a>
</div>

ソーシャルコンポーネントコンポーネント

ポートフォリオ用に設計されたソーシャルメディアコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが特徴です。これには、ユーザーのアバターと名前のプレースホルダーが含まれています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md w-full max-w-sm mx-auto">
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
  </div>
  <p class="mt-4 text-gray-600 dark:text-gray-300">Sharing my latest design project! Check out the details and let me know what you think.</p>
  <div class="flex justify-between items-center mt-6">
    <div class="flex space-x-4">
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-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="M14 10h4.764a2 2 0 011.803 2.855l-1.782 5.583a2 2 0 01-1.803 1.112H9.118c-.748 0-1.504-.316-1.88-.922l-.443-.665A2 2 0 015 15.999v-3l2-2h2.586a1 1 0 01.707.293l2.586 2.586z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815Thead6C.851 17.542.001 14.824.001 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </div>
    <span class="text-gray-500 dark:text-gray-400 text-sm">2h ago</span>
  </div>
</div>

ブルータリズム登録フォーム

ブルータリズムデザイン、トライアドカラースキーム、シンプルな複雑さを備えた登録フォームコンポーネントで、ダッシュボードに適しています。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm border-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-center text-black dark:text-white mb-8 font-mono">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Username</label>
        <input type="text" id="username" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Email</label>
        <input type="email" id="email" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Password</label>
        <input type="password" id="password" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white font-mono
                       dark:bg-blue-700 dark:hover:bg-blue-900">
          Register
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-500 font-mono" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

RetroVintageDataTable (レトロビンテージデータテーブル)

ダークモードをサポートするTailwind CSSを使用したレスポンシブなレトロ/ビンテージスタイルのデータテーブルコンポーネント。

開けるプレビュー

                <!-- Retro Vintage Data Table Component -->
<div class="overflow-x-auto bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl border-4 border-teal-700 dark:border-teal-900 font-sans">
  <table class="min-w-full border-collapse border-spacing-0">
    <thead>
      <tr class="bg-teal-700 dark:bg-teal-900 text-gray-100 text-sm uppercase">
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Name</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Title</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Status</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Role</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Image</th>
      </tr>
    </thead>
    <tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-300 dark:divide-gray-600 text-gray-800 dark:text-gray-200 text-sm">
      <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            Rickard Andersson
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Software Engineer</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1015/60/40" alt="Random Image">
        </td>
      </tr>
      <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
             Alice Johnson
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Product Manager</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">Pending</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Admin</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1018/60/40" alt="Random Image">
        </td>
      </tr>
       <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Avatar">
             Bob Williams
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">UX Designer</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Inactive</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1024/60/40" alt="Random Image">
        </td>
      </tr>
       <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
             Jane Smith
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Marketing Specialist</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1025/60/40" alt="Random Image">
        </td>
      </tr>
    </tbody>
  </table>
</div>

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

Tailwind CSSを使用したレスポンシブエフェクトを備えたダークモード用に設計されたスティッキーナビゲーションコンポーネント。

開けるプレビュー

                <header class="bg-gray-900 text-white shadow sticky top-0 z-50">
    <div class="container mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
            <h1 class="text-xl font-semibold">My Website</h1>
        </div>
        <nav class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-400">Home</a>
            <a href="#" class="hover:text-gray-400">About</a>
            <a href="#" class="hover:text-gray-400">Services</a>
            <a href="#" class="hover:text-gray-400">Contact</a>
        </nav>
        <div class="md:hidden">
            <button class="text-gray-400 hover:text-gray-500 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>
    </div>
</header>

<main class="bg-gray-800 text-white min-h-screen p-4">
    <section>
        <h2 class="text-2xl font-bold mb-4">Welcome to My Website</h2>
        <p>Here is some content!</p>
        <img src="https://picsum.photos/800/300" alt="Placeholder" class="mt-4 rounded-lg shadow-lg" />
    </section>
</main>

<footer class="bg-gray-900 text-gray-400 text-center p-4">
    <p>&copy; 2023 My Website</p>
</footer>

検索ボックスコンポーネント

Tailwind CSSでスタイリングされたレトロ/ビンテージ検索ボックスコンポーネント。レスポンシブデザイン、ダークテーマのサポート、プレースホルダー画像を備えています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md 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-4">Search</h2>
        <div class="relative">
            <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Type your query..." />
            <button class="absolute inset-y-0 right-0 flex items-center px-4 text-white bg-blue-600 hover:bg-blue-700 rounded-r-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-10 flex">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg shadow-md ml-4" />
    </div>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md" />
        <p class="ml-2 text-gray-800 dark:text-white">User Name</p>
    </div>
</div>

メディア埋め込みコンポーネント

ダークモードをサポートするTailwind CSSのNeumorphismスタイルで設計されたレスポンシブメディア埋め込みコンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center mb-8 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg transition-shadow duration-300 ease-in-out hover:shadow-xl">
    <div class="relative w-full h-0 pb-56 overflow-hidden rounded-lg shadow-inner bg-gray-200 dark:bg-gray-800">
        <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-sm" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
        <div class="ml-4">
            <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h5>
            <p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
        </div>
    </div>
</div>

<style>
    /* Neumorphism styles */
    .bg-white {
        background-color: #f0f0f0;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark .bg-gray-900 {
        background-color: #1c1c1c;
        box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
                    inset -10px -10px 20px rgba(255, 255, 255, 0.1);
    }
    .shadow-inner {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
    }
</style>

Table of Contents コンポーネント

Tailwind CSS でデザインされたミニマリストの目次コンポーネントで、レスポンシブ効果とダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-disc pl-5 space-y-2">
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
        </li>
    </ul>
</div>

<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>

Product Reviews コンポーネント

ブルータリズムスタイルでデザインされた製品レビューコンポーネントで、ハイコントラスト、レスポンシブデザイン、ダークテーマのサポートが特徴です。これには、プレースホルダーサービスからのユーザーアバターと製品画像が含まれます。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                <p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
                <p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image"> 
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
                <p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>

1 ... 253 254 255 256 257 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント