JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<!DOCTYPE html>
<h1>Equal Justice Initiative</h1>

<div>
  <img src="https://drive.google.com/uc?export=view&id=1Tfp_ifDtMBSPykWB4U0BGlAsSVbqbMpE" alt="EJI Icon">
  <h2>
    Mission Statement
  </h2>
  <p>
    The Equal Justice Initiative is committed to ending mass incarceration and excessive punishment in the United States, to challenging racial and economic injustice, and to protecting basic human rights for the most vulnerable people in American society.
  </p>
  <a href="https://eji.org/">Visit Website</a>
</div>
<br><br>
<div>
  <div class="grid-container">
  <div class="grid-item">Supporting Athletes</div>
  <div class="grid-item">Supporting Influencers</div>
  <div class="grid-item">Merch</div>

CSS

h1 {
  color: Black;
  text-align: center;
  text-decoration: underline;
  font-family: arial;
}

h2{
  color: Black;
  text-align: start;
  font-family: arial;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center;
  grid-auto-rows: auto;
  grid-gap: 5rem;
  grid-auto-flow: row;
}
.grid-item{
  color: black;
  font-weight: bold;
  font-family: arial
}
img {
  padding: 0px;
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}