Yvette

it's very good

This tailwind example is contributed by Umutoniwase Yvette, on 24-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

646

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <h1>Umutoniwase yvette</h1>
    <p>Web Developer</p>
  </header>
  <style>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #333;
}

header {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 40px 0;
}

section {
  padding: 30px;
  max-width: 800px;
  margin: auto;
}

h2 {
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
}

.skills ul {
  list-style: none;
  padding: 0;
}

.skills li {
  background-color: #3498db;
  color: white;
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 5px;
}

.project-card {
  background-color: white;
  padding: 20px;
  margin: 15px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  padding: 15px;
  background-color: #2c3e50;
  color: white;
}
</style>

<section class="about">
    <h2>About Me</h2>
    <p>I am a passionate web developer with a love for building beautiful and functional websites using HTML, CSS, and JavaScript.</p>
  </section>

<section class="skills">
    <h2>Skills</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>React</li>
      <li>Node.js</li>
    </ul>
  </section>

<section class="projects">
    <h2>Projects</h2>
    <div class="project-card">
      <h3>Project One</h3>
      <p>A responsive website for a small business.</p>
    </div>
    <div class="project-card">
      <h3>Project Two</h3>
      <p>A portfolio lets people know your expertise, which is why every developer should have one.</p>
    </div>
  </section>

<section class="contact">
    <h2>Contact Me</h2>
    <p>Email: umutoniwase yvette92@gmail.com</p>
  </section>

</body>
</html>

Related Examples