Content Display Component
A glassmorphism styled component for displaying portfolio content with interactive elements, supporting dark mode.
HTML Code
<div class="flex flex-col items-center justify-center p-5 bg-gray-900 min-h-screen">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Portfolio Showcase</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Explore my recent work and projects in this beautifully designed portfolio section.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=1" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=2" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=3" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=4" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
</div>
</div>
</div>
</div>
</div>
</div>Related Components
Retro Social Media Post Card
A responsive social media post card component with a retro/vintage 80s/90s aesthetic, using an analogous color scheme (Sky, Teal, Purple) with Fuchsia accents. Features dark mode support and interactive hover effects. Content includes user avatar, username, timestamp, text post, image, and action buttons (like, comment, share). Built with Tailwind CSS.
Content Display Component
A responsive content display component that incorporates microinteractions with engaging animations focused on user actions. It includes support for dark mode and placeholders for images and avatars.
Playful Jewel-Tone Photography Content Display
A complex, playful, and fun content display component for a photography portfolio or gallery, featuring bright jewel tones, rounded elements, and responsive design with dark mode support. It showcases multiple interactive elements like featured images, grid layouts, and profile sections.