カテゴリ

コンポーネント機能コンポーネント

機能コンポーネント

特定のWebサイト機能を提供するコンポーネント

機能コンポーネントコンポーネント

ブログやコンテンツの消費向けに設計されたシンプルなWebコンポーネントで、魅力的なマイクロインタラクションと、ダークテーマをサポートするグレースケールの配色が特徴です。

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="p-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Blog Post Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3" />
      <div class="text-sm">
        <p class="text-gray-800 dark:text-white">Author Name</p>
        <p class="text-gray-500 dark:text-gray-400">Feb 16, 2023</p>
      </div>
    </div>
  </div>
  <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover bg-gray-200 dark:bg-gray-700 transition-all duration-300 transform hover:scale-105" />
  <div class="p-4 bg-gray-100 dark:bg-gray-700">
    <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-200 transition duration-150 ease-in-out">Read More</button>
  </div>
</div>

ニューモーフィズム機能成分

Neumorphism デザインスタイルに従った Web コンポーネントで、Tailwind CSS で構築されています。レスポンシブデザインとダークモードを純粋にCSSでサポートします。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar" class="w-24 h-24 rounded-full shadow-neumorphic-inset dark:shadow-neumorphic-dark-inset mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-6">Frontend Developer | Neumorphism Enthusiast</p>
      <div class="flex justify-around w-full">
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-6 6"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 7px 7px 15px #a7a7a7,
               -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-inset {
    box-shadow: inset 7px 7px 15px #a7a7a7,
                inset -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-press {
    box-shadow: inset 5px 5px 10px #a7a7a7,
                inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563,
               -7px -7px 15px #374151;
  }
  .dark .shadow-neumorphic-dark-inset {
    box-shadow: inset 7px 7px 15px #4b5563,
                inset -7px -7px 15px #374151;
  }
    .dark .shadow-neumorphic-dark-press {
    box-shadow: inset 5px 5px 10px #4b5563,
                inset -5px -5px 10px #374151;
  }
</style>

機能コンポーネントコンポーネント

ダークモードをサポートするシンプルな機能コンポーネント。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-4 rounded-md shadow-md">
  <h2 class="text-lg font-semibold mb-2">Functional Component</h2>
  <p class="text-sm">This is a minimalist functional component with dark mode support.</p>
</div>

機能コンポーネントコンポーネント

プレビューを開く

                <section class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300">
  <div class="container mx-auto px-6 py-20">
    <h2 class="text-center text-3xl font-semibold capitalize lg:text-4xl">
      Our Functional Components
    </h2>

    <div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/1.jpg"
            alt=""
          />

          <h3 class="mt-4 text-2xl font-semibold capitalize dark:text-white">
            Component One
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/women/1.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Two
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/2.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Three
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

機能コンポーネントコンポーネント - ブルータリズムスタイル

Tailwind CSSを使用してブルータリズムスタイルで設計された機能的なWebコンポーネント。このコンポーネントは、ハイコントラスト、レスポンシブ効果、ダークテーマのサポートを備えた大胆なレイアウトを特徴としています。視覚的な魅力のためのプレースホルダー画像とアバターが含まれています。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
    <div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
        <p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
            This component showcases a raw and bold design aesthetic typical of brutalism. 
            It emphasizes usability and content over polished interfaces.
        </p>
        <div class="flex flex-wrap justify-between gap-4">
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
                <p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
            </div>
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
                <p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
            <h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
            <div class="flex items-center gap-4 mt-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
                <div>
                    <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
                </div>
            </div>
        </div>
    </div>
</div>

機能コンポーネントコンポーネント

3D デザイン、レスポンシブエフェクト、ダークモードのサポートを備えた機能コンポーネントで、Tailwind CSS を使用して実装されています。

プレビューを開く

                <div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/237/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
   <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/238/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
</div>

機能コンポーネントコンポーネント

Tailwind CSS を使用した、レスポンシブ効果とダークテーマのサポートを備えた glassmorphism デザインスタイルを特徴とするコンポーネント。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex flex-row items-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            Passionate about building intuitive and dynamic user experiences. I love coding and design.
        </p>
        <img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Contact Me</button>
    </div>
</div>
<style>
    /* Dark Mode CSS */
    @media (prefers-color-scheme: dark) {
        .bg-opacity-30 {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
</style>

機能コンポーネント

スキューモーフィックデザイン、レスポンシブエフェクト、Tailwind CSS を使用したダークテーマのサポートを備えた機能コンポーネント。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full w-12 h-12 border-4 border-white dark:border-gray-900 shadow-md">
        <h2 class="ml-4 text-xl font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-inner">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">About</h3>
        <p class="text-gray-600 dark:text-gray-400">
            A brief description of the user or content, styled in a way that mimics a card.
        </p>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Photos</h3>
        <div class="grid grid-cols-2 gap-2 mt-2">
            <img src="https://picsum.photos/200?random=1" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=2" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=3" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=4" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
        </div>
    </div>
</div>