Functional Components Component
A minimalist portfolio component designed with Tailwind CSS, featuring a vibrant color scheme and supporting dark mode. This component is intended for showcasing work or products and includes images and avatar placeholders.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">My Portfolio</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 1.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 2.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 3.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 4.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 5</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 5.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-40 object-cover rounded-lg mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 6</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of project 6.</p>
</div>
</div>
<div class="mt-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">About Me</h2>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<p class="text-gray-600 dark:text-gray-400">Hello! I'm a passionate developer who loves to create. Check out my work above and connect with me for collaboration!</p>
</div>
</div>
</div>Related Components
Blog Functional Component
Functional Components Component with 3D design, Complementary color scheme, moderate complexity for blogs, responsive with dark theme support. No JS, just HTML and Tailwind.
Neumorphism Functional Component
A web component following the Neumorphism design style, built with Tailwind CSS. It supports responsive design and dark mode purely through CSS.
Functional Components Component - Dark Mode UI
A responsive social media component designed with dark mode and earth tones, suitable for social networking interfaces. Features user avatars, post content, and interaction buttons.