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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,Transitions

Hero Profile Animation

Author SAI BENDE

215

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

future ai robot
this an ai template by salvator

Author:
Baraka Salvator

4 months ago

608
Animated Coming Soon Page 3

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

9 months ago

1.4k
gradient bg
coolness

Author:
Mango_ 5953

4 months ago

110
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

10 months ago

1.8k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

3 months ago

296
Trading
used to trade something

Author:
nii fanny

4 months ago

389
Hero section

Author:
Mohit Prajapati

3 years ago

12.1k
car delivary
car delivary

Author:
Bonimater

3 months ago

297
Landing page

Author:
Maxim

6 months ago

1.5k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

4 months ago

693
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

1 year ago

1.5k
Hero Beer

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components