CCHub Logo CCHub Tailwind Collection
구성 요소 제품 카드 Skeuomorphic Analogous Job Card 컴포넌트

Skeuomorphic Analogous Job Card 컴포넌트

스큐어모픽 디자인 스타일의 반응형 작업 카드 구성 요소로, 유사한 색 구성표를 사용하여 구인 게시판 및 경력 개발 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-800 dark:via-gray-900 dark:to-black min-h-screen flex items-center justify-center font-sans">

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-7xl">

    <!-- Job Card 1 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/68/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Senior UX Designer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Acme Inc.</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636m11.314 11.314L12.757 13.973a1.998 1.998 0 00-2.828 0L5.636 12.586A".fill-rule="evenodd" clip-rule="evenodd"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Remote
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 2 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$90,000 - $120,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">UX Design</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Figma</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Research</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 2 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/88/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Marketing Manager</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Global Solutions</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Hybrid (NYC)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 5 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$75,000 - $100,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Digital Marketing</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">SEO</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Content</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 3 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/98/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Frontend Developer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Tech Innovators</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            On-site (London)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 1 week ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$80,000 - $110,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">React</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Tailwind CSS</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">JavaScript</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

  </div>
</div>

관련 구성 요소

제품 카드 구성 요소

스큐어모피즘 디자인 스타일, 흙색 색 구성표 및 복잡한 상호 작용을 갖춘 반응형 제품 카드 구성 요소로, 포트폴리오에 적합합니다. 여기에는 어두운 테마 지원이 포함되며 스타일링에 Tailwind CSS를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.

열다

제품 카드 구성 요소

Tailwind CSS와 함께 머티리얼 디자인 원칙을 사용하여 설계된 반응형 제품 카드 구성 요소입니다. 다크 모드를 지원하며 그림자 및 그리드 기반 레이아웃을 제공합니다.

열다

제품 카드 구성 요소

제품 카드 3D 디자인, 반응형 효과 및 어두운 테마를 지원하는 구성 요소입니다.

열다