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>

関連コンポーネント

Glassmorphism メディアコンポーネントコンポーネント

レスポンシブエフェクトとTailwind CSSを使用したダークテーマをサポートするGlassmorphism Media Component

開ける

Skeuomorphic_Grayscale_Media_Component

ビジネス/企業の Web サイト向けにスキューモーフィックなグレースケールスタイルで設計された、複雑でレスポンシブなメディアコンポーネントで、複数のインタラクティブ要素とダークモードのサポートを特長としています。

開ける

アーティスティックフォトグラフィーメディアコンポーネント

写真ポートフォリオ用の複雑でレスポンシブなメディアコンポーネントで、水彩画/芸術的なデザインスタイルとレトロ/ビンテージカラーパレットが特徴です。複数のインタラクティブ要素と完全なダークモードのサポートが含まれています。

開ける