portfolio

Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

This tailwind example is contributed by Lekhraj Ghimire, on 18-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information,about me

Profile Other About us

Author Lekhraj Ghimire

Tailwind v3.4 1.4k 2

Fork Fullscreen

<section class="min-h-screen bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 flex items-center justify-center px-6">
  <div class="max-w-6xl w-full text-white text-center space-y-8">
    
    <div class="space-y-4">
      <h1 class="text-5xl md:text-6xl font-extrabold drop-shadow-lg">Hello, I'm <span class="text-yellow-300">Sophia Ray</span></h1>
      <p class="text-lg md:text-2xl max-w-3xl mx-auto text-white/90">
        A passionate Full-Stack Developer crafting modern, stunning, and accessible websites with love and creativity.
      </p>
      <div class="flex justify-center space-x-4">
        <a href="#portfolio" class="bg-white text-purple-700 font-semibold px-6 py-3 rounded-full shadow-lg hover:scale-105 transition">View My Work</a>
        <a href="#contact" class="border border-white px-6 py-3 rounded-full hover:bg-white hover:text-purple-700 transition">Contact Me</a>
      </div>
    </div>

<div class="flex justify-center">
      <img src="https://i.imgur.com/7vQbFfR.png" alt="Profile Image" class="w-52 h-52 rounded-full border-4 border-white shadow-lg object-cover">
    </div>
  </div>
</section>

<section class="py-24 bg-white dark:bg-gray-900 px-6">
  <div class="max-w-5xl mx-auto text-center space-y-6">
    <h2 class="text-3xl font-bold text-purple-600">About Me</h2>
    <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
      I specialize in building scalable web applications using modern tech stacks. I love solving complex problems, designing beautiful UI, and delivering pixel-perfect products. With years of experience in React, Next.js, Tailwind CSS, and backend systems, I bring ideas to life with smooth performance and clean code.
    </p>
  </div>
</section>

<section class="py-24 bg-gradient-to-br from-purple-500 via-pink-500 to-indigo-500 text-white px-6">
  <div class="max-w-5xl mx-auto text-center space-y-12">
    <h2 class="text-3xl font-bold mb-4">My Skills</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">React.js</div>
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">Next.js</div>
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">Tailwind CSS</div>
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">Node.js</div>
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">TypeScript</div>
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">MongoDB</div>
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">Figma</div>
      <div class="bg-white/20 p-6 rounded-lg shadow-lg font-semibold">AWS</div>
    </div>
  </div>
</section>

<section id="portfolio" class="py-24 bg-white dark:bg-gray-900 px-6">
  <div class="max-w-6xl mx-auto text-center">
    <h2 class="text-3xl font-bold text-purple-600 mb-8">Projects</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      
      <div class="bg-gradient-to-br from-pink-400 to-purple-600 text-white rounded-lg shadow-lg overflow-hidden">
        <img src="https://source.unsplash.com/600x400/?technology,website" class="w-full object-cover" alt="Project 1">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2">Project Alpha</h3>
          <p>Complete e-commerce platform with payment gateway and admin dashboard.</p>
        </div>
      </div>
      
      <div class="bg-gradient-to-br from-indigo-400 to-purple-600 text-white rounded-lg shadow-lg overflow-hidden">
        <img src="https://source.unsplash.com/600x400/?software,webdesign" class="w-full object-cover" alt="Project 2">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2">Project Beta</h3>
          <p>Custom CRM system with live chat, customer pipelines and analytics.</p>
        </div>
      </div>
      
      <div class="bg-gradient-to-br from-pink-300 to-purple-500 text-white rounded-lg shadow-lg overflow-hidden">
        <img src="https://source.unsplash.com/600x400/?coding,developer" class="w-full object-cover" alt="Project 3">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2">Project Gamma</h3>
          <p>Modern SaaS dashboard with real-time reporting and team collaboration.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="contact" class="py-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white px-6">
  <div class="max-w-xl mx-auto text-center space-y-8">
    <h2 class="text-3xl font-bold">Let's Work Together</h2>
    <form class="space-y-4">
      <input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg text-black" required>
      <input type="email" placeholder="Your Email" class="w-full px-4 py-3 rounded-lg text-black" required>
      <textarea placeholder="Your Message" rows="4" class="w-full px-4 py-3 rounded-lg text-black" required></textarea>
      <button type="submit" class="bg-white text-purple-700 font-bold px-6 py-3 rounded-full hover:scale-105 transition">Send Message</button>
    </form>
  </div>
</section>

<footer class="py-6 bg-black text-white text-center">
  <p>© 2025 Sophia Ray — All Rights Reserved</p>
</footer>

Related Examples

google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2k
templete
templete

Uwera Dorcas

1 year ago

1.4k
Chatbox template

Lucas Martinez

3 years ago

13.3k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Kirsten F

1 year ago

1.7k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Question & Answer
questions and answers

Anonymous

3 years ago

9.3k
Product Grid Skeleton
Responsive product grid skeleton built with Tailwind CSS for e-commerce storefronts and online marketplaces. Features animated image placeholders, product titles, pricing, filter chips, and button placeholders.

JUGENDRA GANGWAR

2 weeks ago

40
tab3
table

Anonymous

1 month ago

84
Portfolio

Aitrik Saha

1 year ago

1.9k
ztailwindsnippet01

Anonymous

3 months ago

224
loginForm2
form

Anonymous

1 month ago

261