JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class=blur style=margin-bottom:20px><span style=font-size:120%>SamProf</span>, The Sample Profile</h1>
<div class=blur id=profile_Sidebar><h2>Member Since</h2><div>???</div><h2>Last Activity</h2><div style=font-size:75%>???</div><h2>EXP Points</h2><div>???</div><h2>Post Count</h2><div>???</div><h2>Storygame Count</h2><div>???</div><h2>Duel Stats</h2><div style=font-size:75%>? wins / ? losses</div></div>
<!-- THE IMPORTANT STUFF DOWN HERE -->
<div id=profile_Text>
  <!-- THE AVATAR IMAGE -->
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Dragon_on_vacancies.JPG">
  <!-- BEGIN TEXT ENTERED IN PROFILE SETTINGS -->
  <!-- THE RAND PARAGRAPH -->
  <p id=rand></p>
  <!-- THE RANDOMIZATION SCRIPT -->
  <script>
    // Make clicking the profile picture randomize the text
    var x = document.getElementById("profile_Text");
    var y = x.getElementsByTagName("img");
    y[0].setAttribute("onclick", "randomize()");

    // The text pool 
    var aT = new Array();
    aT[aT.length] = "Sample text 1.";
    aT[aT.length] = "Sample text 2.";
    aT[aT.length] = "Sample text 3.";

    // The randomize text function 
    function randomize() {
      document.getElementById("rand").innerHTML = "&#8220;" + aT[Math.floor(aT.length * Math.random())] + "&#8221;";
    };

    // Randomize the initial text 
    randomize();

  </script>
  <!-- THE REST OF THE PROFILE TEXT -->
  <p><strong>Step 1:</strong> create an empty &lt;p&gt; element with the id "rand"</p>
  <p><strong>Step 2:</strong> Paste in the provided &lt;script&gt;</p>
  <p><strong>Step 3:</strong> Add, change, etc. the <em>aT[aT.length] = "..."</em> lines as necessary</p>
  <p style=clear:left;font-size:90%>Here's a basic rundown of what's happening in each line of the &lt;script&gt;:</p>
  <ol style=clear:left;font-size:90%>
    <li>Variable <strong>x</strong> is defined as the HTML for the area where the avatar and the profile text are</li>
    <li>Variable <strong>y</strong> is defined as the list...

CSS

html {
  box-sizing: border-box;
  min-height: 100%;
  font-family: Verdana;
  background-color: rgb(255, 243, 229);
  border: 1px solid #FFD9AA
}

h1,
h2 {
  font-family: serif
}

img {
  max-width: 256px;
  margin-right: 10px;
  float: left
}

div#profile_Sidebar {
  font-size: smaller;
  background-color: #FFFBF4;
  float: right;
  width: 150px;
  text-align: center;
  margin-top: 10px;
  padding-bottom: 10px;
  line-height: .5;
}

.blur {
  filter: blur(2px);
  -webkit-filter: blur(2px);
  opacity: .5
}

JavaScript

//JavaScript is in the HTML section