Data Visualization Component
A responsive data visualization component designed in Material Design style with a pastel color scheme, suitable for showcasing portfolio work with dark mode support.
HTML Code
<div class="max-w-4xl mx-auto p-4">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
</div>
</div>
</div>
</div>Related Components
Data Visualization Components Component
A responsive data visualization component with multiple interactive elements, designed for a blog/content website. It features a minimalist/flat design, a complementary color scheme, and includes dark theme support.
Sports_Fitness_Dashboard_Monospace
A clean, code-inspired sports/fitness dashboard component with monospace fonts, terminal aesthetics, and ocean/blue tones. It features responsive design, dark mode support, and data visualization elements suitable for sports teams and fitness applications.
Data Visualization Components Component
A simple dark mode data visualization component for social media with an analogous color scheme.