Code Output

<div class="mx-auto container">
<!---------------------

  Template Generated & Created by @Safe (https://toyhou.se/Safe)

  Please:
    - Do not remove the attribution
    - Feel free to poke around or learn from it, I do the same
    - Hit me up if you need a code for yourself :)

---------------------->
  <div class="mx-auto" style="border-style: solid;border-width: 1px;border-color: lightgray;border-radius: 0.5rem;user-select: none;padding: 1.5rem;max-width: 30rem;min-width: 17rem;min-height: 15rem; display: flex; flex-direction: column;">
    <h1 class="mx-auto" style="max-width: 20rem;letter-spacing: 0.025em;line-height: 1.5;font-weight: 500;font-size: 1.5rem;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">Safe</h1>
    <p class="text-muted font-italic text-monospace" style="font-size: 0.75rem;text-align: center;">he/her : goo ging gong : write something</p>
    <div style="margin-top: 1.5rem;margin-bottom: 1.5rem;flex-grow: 1;display:flex;flex-direction: row;">
      <div class="w-50" style="padding-right: 1.5rem;">
        <div class="w-100 text-monospace" style="font-size: 0.75rem;line-height: 0.4rem;padding-top: 0.6rem;">
          	<p class="w-100" style="display: flex;align-items: center;justify-content: space-between;"><span>Commissions</span><span class="mx-2" style="border-style:solid;border-width: 0px;border-top-width: 1px;border-color: lightgray;flex-grow: 1;height: 0;"></span><a class="text-secondary" style="text-decoration: underline;" href="https://toyhou.se/">Open</a></p>
	<p class="w-100" style="display: flex;align-items: center;justify-content: space-between;"><span>Trades</span><span class="mx-2" style="border-style:solid;border-width: 0px;border-top-width: 1px;border-color: lightgray;flex-grow: 1;height: 0;"></span><span>Closed</span></p>
        </div>
        <div class="text-center font-italic" style="font-size: 0.75rem;margin-top: 1rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
          rlly tiny note if u want...
        </div>
      </div>
      <div class="w-50" style="border-style: solid;border-width: 0px;border-color: lightgray;border-left-width: 1px;text-align: left;padding-left: 1.5rem;">
        	<p>Write something inspiring about yourself, I think people will really like to hear about you.</p>
	<p>The more you write in here, the longer the box will get. So keep that in mind.</p>
      </div>
    </div>
    <div class="mx-auto" style="display: flex;flex-direction: row;align-items: center;column-gap: 0.45rem;">
      	<a href="https://toyhou.se" class="text-secondary"><i class="fab fa-instagram"></i></a>
	<a href="https://toyhou.se" class="text-secondary"><i class="fab fa-tumblr"></i></a>
	<a href="https://toyhou.se" class="text-secondary"><i class="fab fa-twitter"></i></a>
	<a href="https://toyhou.se" class="text-secondary"><i class="fab fa-deviantart"></i></a>
	<a href="https://toyhou.se" class="text-secondary"><i class="fab fa-spotify"></i></a>
    </div>
    
  </div>
  <div class="mx-auto" style="user-select: none;max-width: 30rem;min-width: 17rem;">
    <a class="pull-right px-2 text-muted"href="https://toyhou.se/safe"><i class="fad fa-sparkles"></i></a>
  </div>
</div>