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.

This tailwind example is contributed by Ayyamperumal S, on 26-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA,Author box, User information,about me,CV template

Footer Header FAQ Hero Profile Team About us Resume template

Author Ayyamperumal S

Tailwind v3.4 3.1k 7

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Ayyamperumal | Senior Software Developer (Nagercoil & Kochi)</title>

<header class="sticky top-0 z-20 bg-white/80 backdrop-blur border-b border-gray-200">
    <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
      <span class="font-semibold">Ayyamperumal</span>
      <nav class="flex gap-6 text-sm text-gray-600">
        <a href="#about" class="hover:text-black">About</a>
        <a href="#skills" class="hover:text-black">Skills</a>
        <a href="#experience" class="hover:text-black">Experience</a>
        <a href="#contact" class="hover:text-black">Contact</a>
      </nav>
    </div>
  </header>

<section class="py-28">
    <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
      <div class="space-y-8">
        <h1 class="text-5xl font-semibold leading-tight">
          Senior Software Developer<br>
          building scalable products
        </h1>

<p class="text-lg text-gray-600 leading-relaxed">
          I’m a senior mobile and full-stack developer with 9+ years of experience
          building high-performance applications across mobile and web.
          I specialize in React Native, React, and modern system architecture.
        </p>

<div class="flex gap-4">
          <a href="#contact"
             class="px-6 py-3 bg-black text-white rounded-lg text-sm font-medium">
            Contact Me
          </a>
          <a href="https://portfolio-ayyam.vercel.app/"
             class="px-6 py-3 border border-gray-300 rounded-lg text-sm">
            View Portfolio
          </a>
        </div>
      </div>

<section id="about" class="py-24 bg-white">
    <div class="max-w-4xl mx-auto px-6 space-y-6">
      <h2 class="text-3xl font-semibold">About</h2>
      <p class="text-gray-600 leading-relaxed">
        I focus on designing and building systems that scale — technically and
        operationally. Over the years, I’ve worked across healthcare,
        e-commerce, and enterprise platforms, delivering maintainable,
        production-grade applications.
      </p>
    </div>
  </section>

<section id="skills" class="py-24">
    <div class="max-w-6xl mx-auto px-6 space-y-12">
      <h2 class="text-3xl font-semibold">Skills</h2>

<div class="grid sm:grid-cols-2 md:grid-cols-4 gap-6">
        <div class="p-6 bg-white rounded-xl border">
          <h4 class="font-medium">React Native</h4>
          <p class="text-sm text-gray-600 mt-2">iOS & Android apps</p>
        </div>
        <div class="p-6 bg-white rounded-xl border">
          <h4 class="font-medium">React / Next.js</h4>
          <p class="text-sm text-gray-600 mt-2">Web platforms</p>
        </div>
        <div class="p-6 bg-white rounded-xl border">
          <h4 class="font-medium">TypeScript</h4>
          <p class="text-sm text-gray-600 mt-2">Large codebases</p>
        </div>
        <div class="p-6 bg-white rounded-xl border">
          <h4 class="font-medium">AWS & Docker</h4>
          <p class="text-sm text-gray-600 mt-2">Cloud & deployment</p>
        </div>
      </div>
    </div>
  </section>

<section id="experience" class="py-24 bg-white">
    <div class="max-w-4xl mx-auto px-6 space-y-12">
      <h2 class="text-3xl font-semibold">Experience</h2>

<div class="space-y-8">
        <div>
          <h4 class="font-medium">Senior Software Developer</h4>
          <p class="text-sm text-gray-600 mt-1">
            Led development of scalable mobile and web applications using
            React Native and Next.js, focusing on performance and maintainability.
          </p>
        </div>

<div>
          <h4 class="font-medium">Lead Mobile Developer</h4>
          <p class="text-sm text-gray-600 mt-1">
            Architected multiple React Native applications with complex state
            management and backend integrations.
          </p>
        </div>

<div>
          <h4 class="font-medium">Full Stack Developer</h4>
          <p class="text-sm text-gray-600 mt-1">
            Delivered end-to-end features including APIs, authentication,
            notifications, and payment flows.
          </p>
        </div>
      </div>
    </div>
  </section>

<section id="contact" class="py-24">
    <div class="max-w-4xl mx-auto px-6 space-y-8">
      <h2 class="text-3xl font-semibold">Contact</h2>

<form class="grid gap-6 bg-white p-8 rounded-xl border">
        <input type="text" placeholder="Name"
          class="border px-4 py-3 rounded-lg" />
        <input type="email" placeholder="Email"
          class="border px-4 py-3 rounded-lg" />
        <textarea rows="4" placeholder="Message"
          class="border px-4 py-3 rounded-lg"></textarea>
        <button class="bg-black text-white px-6 py-3 rounded-lg text-sm">
          Send Message
        </button>
      </form>
    </div>
  </section>

</body>
</html>

Related Examples

Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
About me section with image

Kofi Osei

3 years ago

25.3k
Basic Resume template
simple and clean layout that provides a professional look.

R.P Ketan

3 years ago

28.1k
Modern resume template
modern resume template with data

Amit Pachange

3 years ago

23.3k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
Hero

Aman kumar

2 years ago

7.7k
Experience Card
Experience card section you can use for portfolio or other profiles.

Khalid

2 years ago

4.4k
Hero Section
Home hero section search bar

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

2 years ago

8.4k
Avatar
Avatar

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

2 years ago

5.1k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

2 years ago

5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.6k