JSFiddle - React, Tailwind, and code Playground

by nodpekar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css">

    <div id="navbar">
      <div class="navbar-items">
        <p>Projects</p>
        <span><i class="fas fa-angle-down"></i></span>
      </div>
      <div class="navbar-items">
        <p>Blog</p>
        <span><i class="fas fa-angle-down"></i></span>
      </div>
      <div class="navbar-items">
        <p>Resume</p>
        <span><i class="fas fa-angle-down"></i></span>
      </div>
    </div>

CSS

body,
html {
  height: 100%;
  margin: 0;
}


#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: grid;
  align-items: center;
  justify-content: center;
}