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

453

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

canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

10 months ago

3.6k
my website

Author:
Creative Solution

1 year ago

2.8k
Creative Hero Section

Author:
Ijila Itunu

5 months ago

862
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

Author:
matoleo chance

4 months ago

551
Yvette
nice

Author:
Umutoniwase Yvette

4 months ago

468
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.2k
Hero

Author:
Hasan AlDoy (McDoy)

8 months ago

1.3k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

1k
No one
nice

Author:
Umutoniwase Yvette

4 months ago

253
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.6k
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.1k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

1 month ago

118

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components