JSFiddle - React, Tailwind, and code Playground

HTML

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

		<title>
			"Hello Coursera!"
		</title>

		<link rel="stylesheet" href="reset.css">
		<link rel="stylesheet" href="style.css">
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Open+Sans&display=swap" rel="stylesheet">

	</head>

	<body>
		<header>
			<nav>
				<ul>
					<li><a href="index.html">Home Page</a></li>
					<li><a href="about.html">About me</a></li>
					<li><a href="contact.html">Contact me</a></li>
				</ul>
			</nav>
			<hr />

			<h1>It's all about me baby.</h1>
			<h2 class="h2-aboutme">
				<q>I am not what happened to me, I am what I choose to become.</q><br>
				(probably) by Carl Jung
			</h2>


		</header>

		<main>

			<ul class="about">
				<li>
					<h3 class="h3-aboutme">Female Coder</h3>
					<img src="https://laisses.github.io/Alura/me.jpg" alt="She Codes Art Logo" class="me">
					<p>I'm learning how to code, and as a cis woman, I know that I am a minority in this field. But there are people working to make things more diverse, and one of them is She Codes Art. They're a non profit that teaches computer science to underrepresented minorities and they joined efforts with Mantra and Co to produce computer science inspired jewelry. It's pretty neat.</p>
					<p>Click the image to know more.</p>
				</li>

				<li>
					<h3 class="h3-aboutme">Psychologist</h3>
					<img src="https://laisses.github.io/Alura/psychology.svg"	alt="hand drawn humam brain decorated with flowers and butterflies" class="psychology">
					<p>I am a psychology graduate from the University of BrasĂ­lia. And even without making a career out of it, this will always be a...

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #E6E6FA;
  color: black; /* FIXME: pick a darkgray color */
  font-size: 95%;
/*  text-align: justify; */
  margin: 15px 100px 75px 40px;
  font-family: 'Open Sans', sans-serif;
  line-height: normal;
}

.banner {
  display:block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 80%;
}

h1, h2, h3 {
  text-align: center;
  font-family: 'Architects Daughter', cursive;
  font-weight: bold;
}

h1 {
  color: #483D8B;
  font-size: 46px;
  margin: 40px 0px 20px 0px;
}

h2 {
  color: #2F4F4F;
  font-size: 28px;
  margin: 20px;
}

.h2-aboutme {
  font-size: 24px;
}

.h3-aboutme {
  color: black; /* FIXME: pick a darkgray color */
}

h3 {
  color: black; /* FIXME: pick a darkgray color */
  font-size: 20px;
}

p {
  margin-left: 40px;
}

.indent {
  margin-left: 10px;
}

a {
  color: black; /* FIXME: pick a darkgray color */
}

/*
.shecodesart {
  text-align: center;
}
*/
a:link, a:visited {
  text-decoration: none;
}

a:hover, a:active {
  color: black;
  font-weight: bold;
}

.house {
  width: 30%
}

.adress {
  margin-left: 20%;
  font-size: 20px;
}

.adress_items {
  font-style: italic;
  display: inline-block;
  vertical-align: top;
  width: 40%;
  margin-left: 15%;
}

nav li{
  display: inline;
  margin-left: 10px;
}

nav ul{
  display: flex;
  justify-content: flex-end;
}

.credit-title {
  text-align: left;
}

.about li {
  display: inline-block;
}

.music {
  background-color: #2B2D42;
  width: 30%;
}

.psychology {
  width: 30%;
}

.me {
  width: 30%;
}