Luxury_Portfolio_Cards_Ocean_Blue
A complex, luxury/premium portfolio cards component designed with ocean/blue tones for showcasing work or products. Features responsive design, sophisticated typography, elegant visuals, and full dark mode support.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-950 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8 font-serif text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-6 drop-shadow-lg text-blue-900 dark:text-blue-200 leading-tight">
Our Exquisite Creations
</h2>
<p class="text-xl sm:text-2xl text-center mb-16 max-w-3xl mx-auto dark:text-gray-300">
Dive into a curated collection of our most distinguished projects, crafted with precision and an unwavering pursuit of perfection.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Card 1 -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700 ">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Azure Sky Residency</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A beacon of modern architecture, featuring bespoke interiors and breathtaking panoramic views.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Designer Avatar">
<span>Anya Sharma</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Architecture</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
View Project
</a>
</div>
</div>
<!-- Card 2 -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1042/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Symphony of the Seas</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An opulent yacht interior design, blending classic elegance with cutting-edge marine technology.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Designer Avatar">
<span>Julian Thorne</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Interior Design</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
Explore Details
</a>
</div>
</div>
<!-- Card 3 -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1044/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Elysian Gardens Revitalization</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A transformative landscape design, harmonizing natural beauty with sustainable urban living.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Designer Avatar">
<span>Lena Petrov</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Landscape</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
See Portfolio
</a>
</div>
</div>
<!-- Card 4 (Placeholder - could be dynamic) -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Oceanic Brand Identity</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">Crafting a distinctive visual language for a luxury coastal resort brand.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/71.jpg" alt="Designer Avatar">
<span>Marcus Finn</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Branding</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
Discover More
</a>
</div>
</div>
<!-- Card 5 (Placeholder) -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Digital Horizon App</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An intuitive and visually stunning mobile application designed for premium travel experiences.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Designer Avatar">
<span>Chloe Rivers</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">UI/UX Design</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
View Case Study
</a>
</div>
</div>
<!-- Card 6 (Placeholder) -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1049/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Timeless Sculpture Series</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A collection of bespoke artistic sculptures, blending classical forms with contemporary abstract elements.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Designer Avatar">
<span>David Hayes</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Art & Craft</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
Discover Collection
</a>
</div>
</div>
</div>
</div>
</div>Related Components
Dark Mode Social Cards
A responsive card component styled for dark mode with earth tones, designed for social media interfaces.
Material Design Card
A Material Design-styled card component with responsive behavior and dark mode support using Tailwind CSS. Features elevation and ripple effects visual cues.
Skeuomorphic Cards Component
Inspired by Skeuomorphism, the following card component is fully responsive with dark theme support. For dark mode, CSS support is sufficient. No JavaScript is needed.