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.

This tailwind example is contributed by Hezron Okoko, on 27-Aug-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information,CV template

Hero Profile Resume template

Author Hezron Okoko

Tailwind v3.4 3.6k 4

Fork Fullscreen

<body class="bg-gray-100 text-gray-800">
  <div class="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-lg mt-10">
    <header class="flex items-center mb-6">
      <img src="https://media.licdn.com/dms/image/D4D12AQHBgMttNT44bw/article-cover_image-shrink_720_1280/0/1673417990795?e=2147483647&v=beta&t=mRO_7zq02rlo8kfKq_mUTFEv9aC9Un7H9uj0xTD3-Z4" alt="Profile Picture" class="profile-pic mr-6">
      <div>
        <h1 class="text-3xl font-bold text-gray-900">John Doe</h1>
        <p class="text-lg text-gray-600">Web Developer | UI/UX Designer</p>
        <p class="text-gray-500 mt-2">Email: john.doe@example.com | Phone: (123) 456-7890 | LinkedIn: linkedin.com/in/johndoe</p>
      </div>
    </header>

<section>
      <h2 class="section-title text-xl">About Me</h2>
      <p class="text-gray-700">Passionate web developer with over 5 years of experience in building interactive and responsive websites. Adept at collaborating with designers and developers to create user-centered solutions. Excels in problem-solving and is committed to continuous learning and improvement.</p>
    </section>

<section class="mt-8">
      <h2 class="section-title text-xl">Skills</h2>
      <div class="space-y-4">
        <div>
          <h3 class="font-semibold">HTML & CSS</h3>
          <div class="skill-bar">
            <div class="skill-fill" style="width: 90%;"></div>
          </div>
        </div>
        <div>
          <h3 class="font-semibold">JavaScript</h3>
          <div class="skill-bar">
            <div class="skill-fill" style="width: 80%;"></div>
          </div>
        </div>
        <div>
          <h3 class="font-semibold">React</h3>
          <div class="skill-bar">
            <div class="skill-fill" style="width: 85%;"></div>
          </div>
        </div>
        <div>
          <h3 class="font-semibold">UI/UX Design</h3>
          <div class="skill-bar">
            <div class="skill-fill" style="width: 75%;"></div>
          </div>
        </div>
      </div>
    </section>

<section class="mt-8">
      <h2 class="section-title text-xl">Experience</h2>
      <div class="space-y-4">
        <div>
          <h3 class="font-semibold">Senior Web Developer at XYZ Corp</h3>
          <p class="text-gray-600">Jan 2020 - Present</p>
          <ul class="list-disc ml-6 mt-2 text-gray-700">
            <li>Developed and maintained company websites and applications.</li>
            <li>Collaborated with cross-functional teams to enhance user experience.</li>
            <li>Implemented responsive designs and optimized performance.</li>
          </ul>
        </div>
        <div>
          <h3 class="font-semibold">Front-End Developer at ABC Inc</h3>
          <p class="text-gray-600">Jun 2017 - Dec 2019</p>
          <ul class="list-disc ml-6 mt-2 text-gray-700">
            <li>Built interactive user interfaces with HTML, CSS, and JavaScript.</li>
            <li>Worked closely with designers to create visually appealing designs.</li>
            <li>Ensured cross-browser compatibility and responsiveness.</li>
          </ul>
        </div>
      </div>
    </section>

<section class="mt-8">
      <h2 class="section-title text-xl">Education</h2>
      <div>
        <h3 class="font-semibold">Bachelor of Science in Computer Science</h3>
        <p class="text-gray-600">University of Somewhere</p>
        <p class="text-gray-500">Graduated: May 2017</p>
      </div>
    </section>
  </div>
</body>

Related Examples

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
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
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

2 years ago

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

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

2 years ago

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

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

2 years ago

9.7k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Portfolio Hero Section 4

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

1 year ago

4.9k
Single Page Portfolio

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

1 year ago

3.2k
Hero

Hasan AlDoy (McDoy)

1 year ago

2k
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