検索コンポーネント

すべてのコンポーネント

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

レトロなソーシャルシェアボタン

レトロ/ビンテージデザイン、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートを備えたソーシャルシェアボタンコンポーネント、JavaScriptは必要ありません。

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900" style="font-family: 'Press Start 2P', cursive;">
  <div class="flex space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-retro">
    <a href="#" class="share-button facebook">
      <img src="https://img.icons8.com/fluent/48/000000/facebook-new.png" alt="Facebook" class="w-8 h-8">
    </a>
    <a href="#" class="share-button twitter">
      <img src="https://img.icons8.com/fluent/48/000000/twitter.png" alt="Twitter" class="w-8 h-8">
    </a>
    <a href="#" class="share-button instagram">
      <img src="https://img.icons8.com/fluent/48/000000/instagram.png" alt="Instagram" class="w-8 h-8">
    </a>
    <a href="#" class="share-button pinterest">
      <img src="https://img.icons8.com/fluent/48/000000/pinterest.png" alt="Pinterest" class="w-8 h-8">
    </a>
  </div>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    .shadow-retro {
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    }

    .dark .shadow-retro {
        box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.2);
    }

    .share-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      border: 2px solid #000;
    }

     .dark .share-button {
        border: 2px solid #fff;
     }

    .share-button:hover {
      transform: translateY(-5px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button:hover {
        box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.3);
    }

    .facebook {
      background-color: #4267B2;
    }
    .twitter {
      background-color: #1DA1F2;
    }
    .instagram {
      background-color: #E1306C;
    }
    .pinterest {
      background-color: #BD081C;
    }
  </style>
</div>

プログレスバーコンポーネント

Tailwind CSSを使用してダークモード用に設計されたレスポンシブプログレスバーコンポーネントで、最新のWebアプリケーションに適しています。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

成功メッセージコンポーネント

Neumorphismデザイン、レスポンシブ、ダークテーマをサポートするSuccess Messages Component

開けるプレビュー

                <div class="flex items-center justify-center h-screen dark:bg-gray-900">
  <div class="bg-gray-200 p-6 rounded-xl shadow-xl s Neumorphism dark:bg-gray-800">
    <div class="text-green-500 text-2xl mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" 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" />
      </svg>
    </div>
    <h3 class="text-xl font-semibold mb-2 dark:text-white">Success!</h3>
    <p class="text-gray-600 dark:text-gray-300">Your action was performed successfully.</p>
  </div>
</div>

ログイン/サインアップコンポーネント

Tailwind CSSを使用したダークモード用に設計されたレスポンシブログイン/サインアップコンポーネント。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl text-white text-center mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Login</button>
        </form>
        <div class="text-center text-gray-400 mt-4">
            <p>Don't have an account? <a href="#" class="text-blue-400">Sign up</a></p>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
        <h2 class="text-2xl text-white text-center mb-6">Sign Up</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email-signup" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password-signup" placeholder="Create a password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Sign Up</button>
        </form>
    </div>
</div>

スキューモーフィック反応ボタン

スキューモーフィックデザインスタイルの「いいね!」ボタンとリアクションボタンのセットで、レスポンシブレイアウトとダークモードをサポートします。ボタンは、JavaScriptを使用せずに、HTMLとTailwind CSSのみで実装されています。ダークモードはCSSクラスを介して処理されます。プレースホルダー画像はアバターに使用されます。

開けるプレビュー

                 <style>
      .skeuomorphic {
        background-color: #e0e0e0;
        box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
        border-radius: 10px;
        padding: 10px;
      }

      .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #bebebe, inset -7px -7px 15px #ffffff;
      }

      .dark .skeuomorphic {
        background-color: #333;
        box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
      }

      .dark .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #222, inset -7px -7px 15px #444;
      }
    </style>
    <div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-black">
      <div class="flex space-x-4 skeuomorphic dark:skeuomorphic">
        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.28-.293-1.92-.434L13 18H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v4zm-2 0h2"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Like</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <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>
          <span class="text-gray-700 dark:text-gray-300">Love</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14.828 14.828a4 4 0 01-5.656 0M9 21v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Haha</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Wow</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Sad</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Angry</span>
        </button>
      </div>
    </div>

ソーシャル共有ボタンコンポーネント

レスポンシブなソーシャルシェアボタンコンポーネントは、glassmorphismエフェクトでスタイル設定され、明るいテーマと暗いテーマの両方をサポートします。

開けるプレビュー

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F2937;
        }
    }
</style>

レーティングシステムコンポーネント

Neumorphismスタイル、レスポンシブエフェクト、ダークテーマのサポートを備えた評価システムコンポーネント。

開けるプレビュー

                <div class='flex items-center justify-center min-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-xl shadow-neumorphism dark:shadow-neumorphism-dark p-6 space-y-6'><h2 class='text-2xl font-bold text-center text-gray-800 dark:text-white'>Rate our service</h2><div class='flex items-center justify-center space-x-4'><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button></div></div></div><style>.shadow-neumorphism { box-shadow: 7px 7px 15px #c7c7c7, -7px -7px 15px #ffffff; }.dark .shadow-neumorphism-dark { box-shadow: 7px 7px 15px #333, -7px -7px 15px #555; }</style>

ブレッドクラムナビゲーションコンポーネント

Skeuomorphism デザイン、レスポンシブ効果、ダークテーマのサポートを備えたブレッドクラムナビゲーションコンポーネント。

開けるプレビュー

                <nav aria-label="Breadcrumb" class="flex">
  <ol role="list" class="flex items-center space-x-4">
    <li>
      <div>
        <a href="#" class="text-gray-400 hover:text-gray-500">
          <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-1-1l7-7z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Home</span>
        </a>
      </div>
    </li>
    
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
      </div>
    </li>
    
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

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

グリッドベースのレイアウトや深度効果などのマテリアルデザインの原則に基づいて設計されたレスポンシブデータ視覚化コンポーネントで、ダークテーマをサポートしています。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition-all ease-in-out duration-300">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Data Visualization</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 1</h3>
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 1 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 2</h3>
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 2 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 3</h3>
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 3 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 4</h3>
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 4 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 5</h3>
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 5 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 6</h3>
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 6 goes here.</p>
        </div>
    </div>
    <div class="mt-4 text-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-200">Load More</button>
    </div>
</div>

ハンバーガーメニューコンポーネント

ブルータリズムデザインのレスポンシブハンバーガーメニューコンポーネントで、ハイコントラスト、大胆なスタイル、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="relative bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <button class="flex items-center justify-center w-10 h-10 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md transition-all">
        <svg class="w-8 h-8" 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="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
    </button>
    <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 ease-in-out transform scale-0 origin-top-right">
        <div class="flex flex-col p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10 mb-2">
            <h3 class="text-lg font-bold text-black dark:text-white">Menu Title</h3>
            <ul class="space-y-2">
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 1</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 2</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

1 ... 270 271 272 273 274 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント