JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>


<form action="https://cs.csub.edu/~nick/2680/demos/voweler.php?text=Hello&accesscode=2680F21">
<!--<button type="button" onclick="loadDoc()">Augment</button><br> -->
<input type="submit" value="Augment">
</form>


<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Holograms</h2>
</div></div><br>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
    <div id="title">
      <h2>Holograms In The Future?</h2>
      <h5>November 24th, 2021.</h5>
      <div id ="hologram">
      
      <!--Img src -->
      <img src="hologram.jpg" alt="Holograms"><br></div><br>
      <p>Text </p>
      <p>Text </p>
    </div>
    </div> 
    </div>
    </div>

<div class="footer">
<div id="footer">
 
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>  
</div>

</body>
</html>

CSS

* {
  box-sizing: border-box;
}

/* Add a gray background color with some padding */
body {
  font-family: Arial;
  padding: 20px;
  background: #32cd32;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: #7df9ff;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 100%;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
   background-color: #87ceeb;
   padding: 20px;
   margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #00bfff;
  margin-top: 20px;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-google {
  background: #dd4b39;
  color: white;
}


.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

#hologram {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

JavaScript

$(document).ready(function () {
        $("#header").hide().fadeIn(2000);
    });

$(document).ready(function () {
        $("#title").hide().fadeIn(2000);
    });

$(document).ready(function () {
        $("#footer").hide().fadeIn(2000);
    });