Brutalism_Job_Media_Card
Un componente multimediale complesso, in stile brutalista, per una bacheca di lavoro, caratterizzato da un contrasto elevato, una tipografia audace e una combinazione di colori viola/viola. Reattivo con supporto per la modalità oscura.
Codice 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>Componenti correlati
Componente multimediale Glassmorphic
Un componente della scheda multimediale reattivo con un design glassmorphism (effetto vetro smerigliato) costruito con Tailwind CSS. Presenta un segnaposto per immagini (da picsum.photos) con un'icona di riproduzione al passaggio del mouse, contenuti testuali, una sezione autore con un avatar (da randomuser.me) e pulsanti di azione. Il componente supporta la modalità oscura utilizzando le varianti "dark:" di Tailwind CSS ed è reattivo su varie dimensioni dello schermo. Non è richiesto alcun JavaScript. Per un effetto visivo ottimale, posizionare questo componente su uno sfondo a contrasto. La funzionalità della modalità oscura presuppone una configurazione CSS Tailwind appropriata (ad esempio, 'darkMode: "class"' nel tuo tailwind.config.js).
Componente Componenti multimediali
Un componente multimediale per social media complesso, reattivo e compatibile con la modalità oscura con uno stile Glassmorphism che utilizza colori vivaci.
Componenti multimediali
Un componente in stile neumorfismo per la visualizzazione multimediale con design reattivo e supporto per temi scuri.