JSFiddle - React, Tailwind, and code Playground

by AlexanderThe3rd

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!--Nav Bar-->
<navbar id="navbar">
  <ul>
    <li>
      <a href="#welcome-section">About</a>
    </li>
    <li>
      <a href="#projects">Designs</a>
    </li>
    <li>
      <a href="#">All Projects</a>
    </li>
  </ul>
</navbar>

<!--Header - welcome message-->
<header id="welcome-section">
  <h1>I am Alexander</h1>
  <p>A Baby Web Developer</p>
</header>

<!--Link to Project-->
<section id="projects" class="all_projects">
  <h2 class="project-title  project-tile">
    Bask On The Projects <span class="project-title-newline">That <span class="sizeof-i">I</span> Brought Life To</span>
  </h2>
  <figure class="project_1">
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project"></a>
    <!-- half size of the origianl width="478.75" height="249.75" -->
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank">
      <figcaption>
        Tribute Page</figcaption>
    </a>
  </figure>

  <figure class="project_2">
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project"></a>
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank">
      <figcaption>Caption Project 2</figcaption>
    </a>
  </figure>

  <figure class="project_3">
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project"></a>
    <a...

CSS

:root {
  --text-color: #404040;
  --header-bg: #d6f5f5;
  --figcation-background: #ccccff;
  --figcation-text: #000080;
  --navbar-background: #d1e0e0;
  --navbar-text: #cc3300;
  --background-LinkToAll-container: #ccbfd9;
  --background-LinkToAll-link: #e6ccff;
}

* {
  margin: 0;
  padding: 0;
}
body {
  box-sizing: border-box;
  color: var(--text-color);
  margin: 0;
}
/* NAV BAR SECTION */
navbar {
  display: flex;
  width: 100%;
  
  background-color: var(--navbar-background);
  position: fixed;
  top:0;
}

ul {
  display: flex;
  
  width: 100%;
  justify-content: space-around;
  margin: 0;
}

ul li {
  list-style-type: none;
  /*padding: 0 5%;*/
  font-size: 1.5em;
  font-weight: bold;
  margin: 15px;
}

li a {
  text-decoration: none;
  color: var(--navbar-text);
}

/* WELCOME MESSAGE SECTION */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--header-bg);
  height: 250px;
  border: solid;
  width: 100%;
  height: 100vh;
  
}



header h1 {
  font-size: 3rem;
  
}

header p {
  font-size: 1.5rem;
  
}

/* PROJECT SECTION */
.all_projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr;
  grid-template-areas:
    "header header header"
    "g_project_1 g_project_2 g_project_3"
    "g_project_4 g_project_4 g_project_3";
  gap: 20px 20px;
  border: solid pink;
  background-color: #fff3e6;
}
.project-title {
  grid-area: header;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  font-size: 2rem;
  line-height: 1.1;

  border: solid;
  background-color: #ccccff;
}

span.project-title-newline {
  display: block;
  border: solid;
  background-color: #c2c2a3;
}

span.sizeof-i {
  font-size: 3rem;
}

/*container of the image*/
figure {
  position: relative;
}
/*End Of Image Container*/

img {
  display: block;
  transition-property: transform, opacity;
  transition-duration:...