Container Component
A skeuomorphic portfolio container component with a dark theme and responsive design, showcasing work and products with interactive elements.
HTML Code
<div class="bg-gray-800 p-5 rounded-lg shadow-lg dark:bg-gray-900 transition-all">
<h2 class="text-3xl font-bold text-gray-200 dark:text-gray-100 mb-5">My Portfolio</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
<img class="w-full" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item">
<div class="p-5">
<div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 1</div>
<p class="text-gray-300 dark:text-gray-400">A brief description of the project showcasing my skills and efforts on this particular piece.</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
<img class="w-full" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item">
<div class="p-5">
<div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 2</div>
<p class="text-gray-300 dark:text-gray-400">A brief description of another project showcasing unique features and creative solutions.</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
<img class="w-full" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item">
<div class="p-5">
<div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 3</div>
<p class="text-gray-300 dark:text-gray-400">Description of the project highlighting my contributions and outcomes of the work.</p>
</div>
</div>
</div>
<div class="mt-5 text-center">
<h3 class="text-xl font-bold text-gray-200 dark:text-gray-100 mb-3">Contact Me</h3>
<div class="flex justify-center space-x-4">
<a href="#" class="flex items-center text-gray-300 dark:text-gray-400 hover:text-gray-200 dark:hover:text-gray-100">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="Avatar"> My Name
</a>
</div>
</div>
</div>Related Components
Playful_Blog_Container
A playful and cheerful blog content container with rounded elements and candy-like colors, designed for reading and content consumption. It is fully responsive and supports dark mode.
Container Component
A responsive dark mode container for blog content with a simple grayscale design.
Glassmorphism Portfolio Container
A responsive Glassmorphism Container Component with dark mode support tailored for a portfolio website using Tailwind CSS. It features a frosted glass effect, a triadic color scheme, multiple interactive elements, and uses picsum.photos for images and randomuser.me for avatars.