JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <nav class="nav"
  >
    <div style="background-color: black; width: 10px; height: 10px"></div>
    <div>DISC workshop series</div>
    <div>Content</div>
    <div>Schedule</div>
    <div>About DISC</div>
  </nav>
  <div
    style="
      height: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 100px;
      padding-bottom: 100px;
      gap: 0px;
    "
  >
<!--     <div style="height: 120px; width: 250px; background-color: teal"> -->
      <img src="https://disc-fall-2024-workshop-series-website.vercel.app/_next/image?url=%2Fdisc-logo.png&w=384&q=75" style="width: 300px; height: auto;">
<!--     </div> -->
    <h2 style=" color: teal; text-align: center">
      discover and innovate for social change
    </h2>
    <h1 style="font-family: arial; margin-top: -15px">Fall Workshop Series</h1>
    <h5 style="font-family: arial; color: darkgrey; text-align: center">
      This is a workshop series that will introduce you to the essentials of all
      things modern web development. In this workshop series, you will learn how
      to build a modern web application from scratch using the latest
      technologies and best practices.
    </h5>
    <div>
      <button style="font-family: arial; background-color: black; color: white">
        Get started
      </button>
      <button style="font-family: arial; background-color: white; color: black">
        Join DISC
      </button>
    </div>
  </div>
</div>

CSS

.nav {
  height: 50px;
  font-family: arial;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  padding-left: 10px;
}

* {
  font-family: arial;
}