Basic Character Profile - F2U Code

<!-- CHARACTER PROFILE - F2U CODE
  For any queries, please contact me on Buzzly (@ceruloryx) or Twitter (@ceruloryx)
  Not exactly mobile friendly :grimace:
  Edit or mash it up as much as you want, but keep credit leading back to my page, please.
  -->

<!-- Character Basics -->
<div class = "bg-gray-100 rounded-lg py-5 pr-5 m-5">
  <div class = "grid grid-cols-12">
    <img class = "h-56 w-56 object-cover rounded-full border-8 col-span-7 mx-auto my-auto" src = "https://images.unsplash.com/photo-1560803262-95a9de00a057?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"></img>
    <div class = "float-right col-span-5">
    <div class = "uppercase tracking-widest font-semibold text-xl text-red-800"><a href = "https://toyhou.se/#######">
      CHARACTER NAME</a>
      </div>
      <hr class = "my-3"></hr>
      <div class = "grid grid-cols-8 break-words">
    <div class = "uppercase tracking-wider text-red-900 float-left mb-2 col-span-4 mr-2">
      gender
      </div>
    <div class = "uppercase tracking-widest float-right mb-2 col-span-4 font-light">
      X
      </div>

    <div class = "uppercase tracking-wider text-red-900 float-left mb-2 col-span-4 mr-2">
      pronouns
      </div>
    <div class = "uppercase tracking-widest float-right mb-2 col-span-4 font-light">
      X
      </div>

    <div class = "uppercase tracking-wider text-red-900 float-left mb-2 col-span-4 mr-2">
      age
      </div>
    <div class = "uppercase tracking-widest float-right mb-2 col-span-4 font-light">
      X
      </div>

    <div class = "uppercase tracking-wider text-red-900 float-left mb-2 col-span-4 mr-2">
      species
      </div>
    <div class = "uppercase tracking-widest float-right mb-2 col-span-4 font-light">
      X
      </div>

    <div class = "uppercase tracking-wider text-red-900 float-left mb-2 col-span-4 mr-2">
      worth
      </div>
    <div class = "uppercase tracking-widest float-right mb-2 col-span-4 font-light">
      X
      </div>

    </div>
  </div>
  </div>
  </div>

<!-- Personality -->
<div class = "bg-gray-100 rounded-lg p-5 m-5">
  <div class = "uppercase tracking-widest font-semibold text-xl text-red-800 mr-3 float-left break-words">
  personality - about
  </div>
  <hr class = "my-4"></hr>
  <div class = "text-gray-600 text-justify font-light">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus arcu bibendum at varius vel pharetra. Sed risus pretium quam vulputate. Senectus et netus et malesuada fames ac turpis egestas sed. Eu sem integer vitae justo eget.
    <br>
    Accumsan sit amet nulla facilisi morbi tempus iaculis. Egestas sed tempus urna et pharetra pharetra massa massa. Tincidunt id aliquet risus feugiat in. Leo vel orci porta non pulvinar neque. Ut sem viverra aliquet eget sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum.
  </div>
  </div>


<!-- Relationships -->
<div class = "bg-gray-100 rounded-lg p-5 m-5">
    <div class = "uppercase tracking-widest float-right font-semibold text-xl text-red-800 ml-2 break-words">
    relationships
  </div>
  <hr class = "my-4 mb-6"></hr>
  <div class = "grid grid-cols-12 font-light">
    <img class = "h-40 w-40 object-cover border-8 rounded-full col-span-4 mx-auto" src = "https://images.unsplash.com/photo-1560803262-95a9de00a057?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"></img>
    <img class = "h-40 w-40 object-cover border-8 rounded-full col-span-4 mx-auto" src = "https://images.unsplash.com/photo-1560803262-95a9de00a057?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"></img>
    <img class = "h-40 w-40 object-cover border-8 rounded-full col-span-4 mx-auto" src = "https://images.unsplash.com/photo-1560803262-95a9de00a057?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"></img>
    <div class = "lowercase col-span-4 text-center m-3 mx-auto break-words hover:text-red-300"><a href = "https://toyhou.se/#######">character 1</a></div>
    <div class = "lowercase col-span-4 text-center m-3 mx-auto break-words hover:text-red-300"><a href = "https://toyhou.se/#######">character 2</a></div>
    <div class = "lowercase col-span-4 text-center m-3 mx-auto break-words hover:text-red-300"><a href = "https://toyhou.se/#######">character 3</a></div>
  </div>
  </div>
<!-- DO NOT EDIT PAST THIS LINE  -->
  <div class = "bg-gray-100 rounded-lg p-5 m-5 text-center">
    <a class = "text-red-800 hover:text-red-300" href="https://buzzly.art/~ceruloryx" rel="nofollow">
  <i class="fas fa-code"></i>
  </a>
  </div>