CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 구성 요소 Brutalism_Job_Media_Card

Brutalism_Job_Media_Card

구인 게시판을 위한 복잡하고 브루탈리즘 스타일의 미디어 구성 요소로, 높은 대비, 대담한 타이포그래피, 자주색/보라색 색 구성표를 특징으로 합니다. 다크 모드 지원으로 반응형.

미리 보기

HTML 코드 

<div class="font-['Arial_Black',_sans-serif] bg-gradient-to-br from-purple-100 via-white to-purple-50 dark:from-neutral-900 dark:via-gray-950 dark:to-purple-950 p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-4xl bg-purple-700 dark:bg-black border-4 border-purple-900 dark:border-purple-500 shadow-[8px_8px_0_0_rgba(72,21,111,1)] dark:shadow-[8px_8px_0_0_rgba(128,90,213,1)] overflow-hidden">
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/black-linen.png')] opacity-10 dark:opacity-5"></div>
    
    <div class="relative z-10 p-4 sm:p-6 md:p-8 lg:p-10 text-white">
      <div class="border-b-4 border-purple-900 dark:border-purple-500 pb-4 mb-6 sm:mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between">
        <h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tighter uppercase text-purple-200 dark:text-purple-300">
          <span class="block -skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1 mb-2 sm:mb-0">JOB</span>
          <span class="block skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1">POSTING CENTRAL</span>
        </h1>
        <button class="mt-4 sm:mt-0 text-lg sm:text-xl md:text-2xl font-bold bg-purple-900 dark:bg-purple-800 text-purple-200 dark:text-purple-300 border-4 border-purple-900 dark:border-purple-500 px-6 py-3 shadow-[4px_4px_0_0_rgba(72,21,111,1)] dark:shadow-[4px_4px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-800 dark:hover:bg-purple-700 transition duration-200 ease-in-out">
          ⚡ BROWSE NOW
        </button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
        <!-- Featured Job Card 1 -->
        <div class="md:col-span-2 bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)]">
          <div class="flex items-start mb-4 border-b-2 border-purple-800 dark:border-purple-700 pb-3">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-purple-500 dark:border-purple-400 mr-4" src="https://picsum.photos/id/237/100/100" alt="Company Logo">
            <div>
              <h3 class="text-xl sm:text-2xl md:text-3xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-none mb-1">LEAD UX NINJA</h3>
              <p class="text-sm sm:text-base text-purple-300 dark:text-purple-400">MEGA CORP INC. <span class="ml-2 text-xs opacity-75">San Francisco, CA</span></p>
            </div>
          </div>
          <p class="text-sm sm:text-base text-purple-200 dark:text-purple-400 mb-4">Seeking a visionary UX leader to revolutionize our digital product ecosystem. Must thrive in high-pressure, chaotic environments and deliver impactful, disruptive solutions.</p>
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="text-xs sm:text-sm font-bold bg-purple-500 dark:bg-purple-600 px-3 py-1 text-white border border-purple-400 dark:border-purple-500">#DESIGN</span>
            <span class="text-xs sm:text-sm font-bold bg-purple-500 dark:bg-purple-600 px-3 py-1 text-white border border-purple-400 dark:border-purple-500">#BRUTALIST</span>
            <span class="text-xs sm:text-sm font-bold bg-purple-500 dark:bg-purple-600 px-3 py-1 text-white border border-purple-400 dark:border-purple-500">#LEADERSHIP</span>
          </div>
          <button class="w-full text-base sm:text-lg md:text-xl font-bold bg-purple-500 text-white dark:bg-purple-600 border-4 border-purple-900 dark:border-purple-500 px-6 py-3 shadow-[4px_4px_0_0_rgba(72,21,111,1)] dark:shadow-[4px_4px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200 ease-in-out">
            🚨 APPLY NOW
          </button>
        </div>

        <!-- Quick Links / Stats Column -->
        <div class="order-first md:order-last">
          <div class="bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 mb-6 sm:mb-8 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)]">
            <h4 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 border-b-2 border-purple-800 dark:border-purple-700 pb-2 mb-3">QUICK LINKS <span class="text-purple-500">_</span></h4>
            <ul class="list-none p-0 m-0">
              <li class="mb-2"><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">🔥 HOT JOBS</a></li>
              <li class="mb-2"><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">⚙️ JOB ALERTS</a></li>
              <li class="mb-2"><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">👤 PROFILE EDIT</a></li>
              <li><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">_ CONTACT US</a></li>
            </ul>
          </div>

          <div class="bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)]">
            <h4 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 border-b-2 border-purple-800 dark:border-purple-700 pb-2 mb-3">STATS <span class="text-purple-500">//</span></h4>
            <div class="grid grid-cols-2 gap-4 text-purple-200 dark:text-purple-400">
              <div>
                <p class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-purple-500 dark:text-purple-300 leading-none">786</p>
                <p class="text-xs sm:text-sm uppercase font-bold ">Active Listings</p>
              </div>
              <div>
                <p class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-purple-500 dark:text-purple-300 leading-none">1.2K+</p>
                <p class="text-xs sm:text-sm uppercase font-bold ">Users Registered</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Latest Opportunities Section -->
      <div class="mt-8 sm:mt-12">
        <h2 class="text-xl sm:text-2xl md:text-4xl font-extrabold uppercase text-purple-200 dark:text-purple-300 border-b-4 border-purple-900 dark:border-purple-500 pb-2 mb-6 sm:mb-8 flex items-center">
          <span class="block -skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1 mr-4">LATEST</span>
          <span class="block skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1">OPPORTUNITIES</span>
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          <!-- Job Card 1 -->
          <div class="bg-purple-800 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-500 p-4 shadow-[5px_5px_0_0_rgba(72,21,111,1)] dark:shadow-[5px_5px_0_0_rgba(128,90,213,1)]">
            <h3 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-tight mb-1">CYBER-SEC GURU</h3>
            <p class="text-sm text-purple-300 dark:text-purple-400 mb-3">FORTRESS CORP. | Remote</p>
            <p class="text-xs text-purple-200 dark:text-purple-400 mb-4">Protect our digital empire from all threats. High stakes, higher rewards.</p>
            <a href="#" class="block text-center text-sm font-bold bg-purple-500 text-white dark:bg-purple-600 border-2 border-purple-900 dark:border-purple-500 px-4 py-2 shadow-[2px_2px_0_0_rgba(72,21,111,1)] dark:shadow-[2px_2px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200">VIEW ROLE</a>
          </div>
          <!-- Job Card 2 -->
          <div class="bg-purple-800 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-500 p-4 shadow-[5px_5px_0_0_rgba(72,21,111,1)] dark:shadow-[5px_5px_0_0_rgba(128,90,213,1)]">
            <h3 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-tight mb-1">SENIOR DATA WIZARD</h3>
            <p class="text-sm text-purple-300 dark:text-purple-400 mb-3">ANALYTICS LLC. | NYC</p>
            <p class="text-xs text-purple-200 dark:text-purple-400 mb-4">Unleash the power of data. Predict the future. Master the chaos.</p>
            <a href="#" class="block text-center text-sm font-bold bg-purple-500 text-white dark:bg-purple-600 border-2 border-purple-900 dark:border-purple-500 px-4 py-2 shadow-[2px_2px_0_0_rgba(72,21,111,1)] dark:shadow-[2px_2px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200">VIEW ROLE</a>
          </div>
          <!-- Job Card 3 -->
          <div class="bg-purple-800 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-500 p-4 shadow-[5px_5px_0_0_rgba(72,21,111,1)] dark:shadow-[5px_5px_0_0_rgba(128,90,213,1)]">
            <h3 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-tight mb-1">PRODUCT DESTRØYER</h3>
            <p class="text-sm text-purple-300 dark:text-purple-400 mb-3">ALPHA DESIGNS | Berlin</p>
            <p class="text-xs text-purple-200 dark:text-purple-400 mb-4">Break the mold. Build the next big thing. No compromises.</p>
            <a href="#" class="block text-center text-sm font-bold bg-purple-500 text-white dark:bg-purple-600 border-2 border-purple-900 dark:border-purple-500 px-4 py-2 shadow-[2px_2px_0_0_rgba(72,21,111,1)] dark:shadow-[2px_2px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200">VIEW ROLE</a>
          </div>
        </div>
      </div>

      <!-- Testimonial / Featured Person -->
      <div class="mt-8 sm:mt-12 bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)] flex flex-col md:flex-row items-center justify-between gap-6">
        <div class="flex-shrink-0">
          <img class="w-24 h-24 sm:w-32 sm:h-32 rounded-full border-4 border-purple-500 dark:border-purple-400 object-cover shadow-[4px_4px_0_0_rgba(72,21,111,1)] dark:shadow-[4px_4px_0_0_rgba(128,90,213,1)]" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow text-center md:text-left">
          <p class="italic text-purple-200 dark:text-purple-400 text-base sm:text-lg mb-2">"THIS PLATFORM IS A JOLT TO THE SYSTEM. PURE ADRENALINE, NO FLUFF. I'VE LANDED MY DREAM DESTRUCTIVE ROLE!"</p>
          <p class="font-bold uppercase text-purple-300 dark:text-purple-200 text-sm sm:text-base">— MAXINE 'THE DESTROYER' KANE, SENIOR ANNIHILATION ENGINEER</p>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

아르 데코 여행 미디어 구성 요소

여행 및 관광 웹사이트를 위한 복잡한 아르데코에서 영감을 받은 미디어 구성 요소로, 세피아/브라운 톤과 기하학적 패턴의 목적지 하이라이트를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

미디어 컴포넌트 컴포넌트

문서/위키 사이트를 위한 복잡한 다크 모드 UI 미디어 구성 요소로, 그라데이션 무지개 색 구성표를 특징으로 합니다. 여기에는 비디오, 오디오 및 자세한 정보와 대화형 요소가 포함된 이미지와 같은 다양한 미디어 유형이 포함되며 모두 반응형이며 시맨틱 HTML을 사용합니다.

열다

미디어 컴포넌트 컴포넌트

브루탈리즘 스타일로 디자인된 미디어 구성 요소로, Tailwind CSS를 사용하여 고대비, 반응형 효과 및 어두운 테마 지원을 갖춘 대담한 레이아웃을 보여줍니다.

열다