Home
SAI BENDE
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

This tailwind example is contributed by SAI BENDE, on 27-Jul-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,Transitions

Hero Profile Animation

Author SAI BENDE

Tailwind v3.4 1.6k 4

Fork Fullscreen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

<section class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900 px-6 py-20 transition-colors duration-300">
  <div class="max-w-7xl w-full flex flex-col-reverse lg:flex-row items-center gap-12">
    
    
    <div class="flex-1 text-center lg:text-left animate-fade-in-up">
      
      <h1 class="text-5xl sm:text-6xl font-extrabold bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-4">
        Hi, I'm Sai Bende
      </h1>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 max-w-xl">
        A passionate <span class="text-indigo-600 dark:text-indigo-400 font-medium">Full-Stack Developer</span> who loves building dynamic UIs and scalable backend systems with the MERN stack.
      </p>

<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
        <a href="#projects" class="px-6 py-3 text-white bg-gradient-to-r from-purple-600 to-pink-500 hover:brightness-110 rounded-xl font-semibold transition-transform transform hover:scale-105 shadow-md">
          🚀 View Projects
        </a>
        <a href="/resume.pdf" download class="px-6 py-3 border border-indigo-500 text-indigo-500 hover:bg-indigo-500 hover:text-white dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-400 dark:hover:text-black rounded-xl font-semibold transition-transform transform hover:scale-105">
          📄 Download Resume
        </a>
      </div>

<div class="flex gap-6 mt-6 justify-center lg:justify-start text-gray-500 dark:text-gray-300 text-xl">
        <a href="https://github.com/SaiBende" target="_blank" class="hover:text-purple-500 transition"><i class="fab fa-github"></i></a>
        <a href="https://linkedin.com/in/saibende" target="_blank" class="hover:text-purple-500 transition"><i class="fab fa-linkedin"></i></a>
        <a href="mailto:bendesai5703@gmail.com" class="hover:text-purple-500 transition"><i class="fas fa-envelope"></i></a>
      </div>
    </div>

<div class="flex-1 flex justify-center animate-float">
      <img src="https://avatars.githubusercontent.com/u/93364713?v=4" alt="Sai Bende" class="w-64 h-64 rounded-full border-4 border-indigo-500 dark:border-indigo-400 shadow-xl object-cover hover:scale-105 transition duration-500" />
    </div>
  </div>
</section>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.1k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.3k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3.2k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Hezron Okoko

2 years ago

3.7k
Portfolio Hero Section 4

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

5k
Animated Profile Card
Animated profile card with profile completion circle

Shivam Vishwakarma

1 year ago

2.3k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

3.2k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.7k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.4k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Vikas Kushwah

1 year ago

2.7k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.4k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.8k