Home
Hezron Okoko
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals

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

Hero Profile Resume template

Author Hezron Okoko

2.1k

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.

Author:
R.P Ketan

2 years ago

25.8k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

20.6k
Hero

Author:
Aman kumar

1 year ago

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

Author:
Khalid

1 year ago

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

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

1 year ago

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

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

1 year ago

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

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

1 year ago

6.8k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

11 months ago

1.5k
Portfolio Hero Section 4

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

7 months ago

2.8k
Single Page Portfolio

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

5 months ago

1.6k
Hero

Author:
Hasan AlDoy (McDoy)

5 months ago

978
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.

Author:
Ayyamperumal S

4 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components