Composant de boîte lumineuse d’image - Violet skeuomorphe
Un composant de lightbox d’image simple et réactif avec un design skeuomorphe dans le spectre violet/violet, adapté aux plateformes d’emploi/de carrière. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800 font-sans">
<!-- Lightbox Container -->
<div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-inset-xl dark:from-purple-800 dark:to-indigo-900 dark:shadow-inset-dark overflow-hidden">
<!-- Skeuomorphic Top Bar -->
<div class="absolute top-0 left-0 w-full h-12 bg-gradient-to-b from-purple-400 to-indigo-500 dark:from-purple-900 dark:to-indigo-800 rounded-t-3xl shadow-sm-light dark:shadow-sm-dark flex items-center justify-between px-4 sm:px-6">
<span class="text-white opacity-75 text-sm font-semibold tracking-wider">VIEW IMAGE</span>
<button aria-label="Close Lightbox" class="w-8 h-8 flex items-center justify-center rounded-full bg-gradient-to-tl from-red-500 to-red-700 dark:from-red-600 dark:to-red-800 border border-red-800 dark:border-red-900 shadow-neu-sm hover:shadow-neu-md transition-all duration-200">
<svg class="w-4 h-4 text-white" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Image Wrapper with Skeuomorphic Border -->
<div class="relative w-full aspect-video mt-12 bg-gray-200 dark:bg-gray-700 rounded-xl overflow-hidden shadow-neu-xl dark:shadow-neu-dark-xl border-4 border-purple-500 dark:border-purple-700 p-2 sm:p-3">
<img src="https://picsum.photos/800/600?random=1" alt="Placeholder Image for Job/Career" class="w-full h-full object-cover rounded-md shadow-inner-dark dark:shadow-inner-light">
<!-- Image Overlay for Skeuomorphism -->
<div class="absolute inset-0 rounded-md pointer-events-none style-none-grain"></div>
</div>
<!-- Image Title/Description -->
<div class="mt-6 text-center">
<h2 class="text-2xl sm:text-3xl font-extrabold text-indigo-800 dark:text-indigo-200 subpixel-antialiased text-shadow-sm">Job Offer Details</h2>
<p class="mt-2 text-base text-purple-700 dark:text-purple-300 opacity-90 leading-relaxed max-w-md mx-auto">
Reviewing key metrics and growth opportunities for the new software engineering role. A detailed look at the project scope.
</p>
</div>
<!-- Action Buttons -->
<div class="mt-8 flex justify-center space-x-4">
<button aria-label="Download Image" class="px-6 py-3 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-700 dark:from-indigo-700 dark:to-indigo-900 text-white font-semibold shadow-neu-sm hover:shadow-neu-md hover:scale-105 transition-all outline-none focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-purple-300 dark:focus:ring-offset-gray-800">
<svg class="w-5 h-5 inline-block mr-2" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Download
</button>
<button aria-label="Share Image" class="px-6 py-3 rounded-full bg-gradient-to-br from-purple-500 to-purple-700 dark:from-purple-700 dark:to-purple-900 text-white font-semibold shadow-neu-sm hover:shadow-neu-md hover:scale-105 transition-all outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-2 focus:ring-offset-purple-300 dark:focus:ring-offset-gray-800">
<svg class="w-5 h-5 inline-block mr-2" 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="M8.684 13.342C8.882 13.07 9 12.723 9 12c0-.723-.118-1.07-.316-1.342m0 0C8.423 10.4 7.9 10 7 10c-1.105 0-2 .895-2 2s.895 2 2 2c.9 0 1.4-.4 1.684-.658zm0 0c.277-.282.63-.424 1.13-.424h5.272c.49 0 .848.14 1.13.424m0 0c.282.277.424.63.424 1.13v2.24c0 .49-.14.848-.424 1.13m0 0C16.895 18 16 18.895 16 20s.895 2 2 2 2-.895 2-2-.895-2-2-2c-.9 0-1.4-.4-1.684-.658zm-11.316 0A2.001 2.001 0 015 20c0 1.105.895 2 2 2s2-.895 2-2-.895-2-2-2c-.9 0-1.4-.4-1.684-.658z"></svg>
Share
</button>
</div>
</div>
<!-- Custom Styles for Skeuomorphism -->
<style>
.shadow-inset-xl {
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3),
inset -5px -5px 15px rgba(255, 255, 255, 0.7);
}
.dark .shadow-inset-dark {
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.7),
inset -5px -5px 15px rgba(255, 255, 255, 0.05);
}
.shadow-sm-light {
box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3);
}
.dark .shadow-sm-dark {
box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
}
.shadow-neu-sm {
box-shadow: 3px 3px 6px rgba(0,0,0,0.2), -3px -3px 6px rgba(255,255,255,0.7);
}
.dark .shadow-neu-sm {
box-shadow: 3px 3px 6px rgba(0,0,0,0.7), -3px -3px 6px rgba(255,255,255,0.05);
}
.shadow-neu-md {
box-shadow: 6px 6px 12px rgba(0,0,0,0.2), -6px -6px 12px rgba(255,255,255,0.7);
}
.dark .shadow-neu-md {
box-shadow: 6px 6px 12px rgba(0,0,0,0.7), -6px -6px 12px rgba(255,255,255,0.05);
}
.shadow-neu-xl {
box-shadow: 8px 8px 16px rgba(0,0,0,0.3), -8px -8px 16px rgba(255,255,255,0.8);
}
.dark .shadow-neu-dark-xl {
box-shadow: 8px 8px 16px rgba(0,0,0,0.7), -8px -8px 16px rgba(255,255,255,0.08);
}
.shadow-inner-dark {
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4),
inset -1px -1px 3px rgba(255, 255, 255, 0.1);
}
.dark .shadow-inner-light {
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6),
inset -1px -1px 3px rgba(255, 255, 255, 0.05);
}
.text-shadow-sm {
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.dark .text-shadow-sm {
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.style-none-grain {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWZmzLpAAAAHnRSTlMAAAAABgYGDg4OFBQWHh4eICAgLCwsMDQ0ODg4QEBAqH5o5wAAALNJREFUeNrlksuOgkAQRG9s3Jt7Z//_P6zEioQ3Mwev4Lqu6y49h2v0f7N4j7eXz7O2b3Cefl4T59n0d3Ce7j4s5-F6eX5On6v0f5V2d3gPezj2f9G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bk4A4-d8C0jO_bAAAAAASUVORK5CYII=");
opacity: 0.05;
filter: grayscale(100%);
}
</style>
</div>Composants associés
Composant Lightbox d’image
Un composant d’image Lightbox réactif conçu pour le commerce électronique avec un style de design plat minimaliste, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.
Composant Lightbox d’image
Un composant lightbox d’image réactif avec le style de conception Neumorphism et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Lightbox d’image
Composant Lightbox d’image minimaliste avec un design réactif et la prise en charge du thème sombre à des fins de tableau de bord. Utilise picsum.photos pour les images.