CCHub Logo CCHub Tailwind Collection
コンポーネント ユーザープロファイル アールデコ調グレースケールユーザープロファイルコンポーネント

アールデコ調グレースケールユーザープロファイルコンポーネント

アールデコ調の幾何学的なグレースケールデザインのレスポンシブユーザープロファイルコンポーネントで、ダークモードのサポートを含む求人掲示板やキャリアプラットフォームに適しています。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- User Profile Card 1 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <!-- Art Deco Border Element -->
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile of Jane Doe" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Jane Doe</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Senior Software Engineer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            San Francisco, CA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            5+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">React</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Node.js</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">AWS</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile of John Smith" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">John Smith</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Product Manager</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            New York, NY
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            8+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Agile</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Roadmapping</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Market Analysis</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 3 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile of Sarah Lee" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Sarah Lee</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">UX Designer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Austin, TX
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Contract
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            6+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Figma</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">User Research</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Prototyping</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 4 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile of David Chen" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">David Chen</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Data Scientist</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Seattle, WA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            4+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Python</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Machine Learning</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">SQL</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

  </div>
</div>

関連コンポーネント

ユーザープロファイルコンポーネント

食品/レストランのWebサイト向けに設計された複雑でレスポンシブなユーザープロファイルコンポーネントで、コントラストの高い色のダークモードUIを備えています。プロファイル情報と行動喚起を含む複数のユーザーカードが含まれています。

開ける

ユーザープロファイルコンポーネント

Tailwind CSS を使用してブルータリズム スタイルでデザインされたユーザー プロファイル コンポーネントで、単色の配色が特徴で、ソーシャル ネットワーキングのインターフェイスを提供します。ダークモードをサポートし、応答性に優れています。

開ける

ユーザープロファイルコンポーネント

旅行/観光 Web サイト向けに設計されたシンプルで芸術的なユーザー プロファイル コンポーネントで、柔らかな水彩画のテクスチャ、虹色のグラデーション カラー スキーム、応答性、ダーク モードのサポートが特徴です。

開ける