Twt Minis

<!--
   Colors used:

   BG: #000000
   Stats, @user, timestamp, icons: #969696
   Main text: #ffffff

	NOTE: When editing the @/USERNAME section, keep the / ! This prevents toyhouse from attempting to link to a real site user and keeps the handle from disappearing completely.
	ex) @/username becomes -> @/dixkolas

	if the / mark shows in the code when placing it in a profile, simply remove the /, as the username does not exist on toyhouse.
	ex) @/nameNotTaken displays in the profile as @/nameNotTaken -> change to @nameNotTaken

   -->
<!--STANDALONE TWEET-->
<div class="container" style="max-width: 600px; min-width: 350px; background-color: #000000; padding: 0px; margin-top: 10px; border: 1px solid gray;">
   <div class="row" style="padding: 15px;">
      <!--Image-->
      <div class="col-3 col-md-2 col-lg-2">
         <img src="https://placehold.jp/50x50.png" class="img-fluid" style="width: 50px; height: 50px; border-radius: 50%;">
      </div>
      <!--Username / Timestamp-->
      <div class="col-7 col-md-9 col-lg-9" style="min-width: 150px;">
         <div class="row">
            <p style="font-weight:600; margin: 0px; color: #ffffff;">Screen Name</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;"><a href="LINK_HERE" style="color: #969696;">@/userName</a></p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">•</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">2d</p>
         </div>
         <!--Content-->
         <div class="row">
            <p style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
         </div>
         <!--Stats-->
         <div class="row" style="padding-top: 10px; min-width: 300px;">
            <div class="col-2 p-0">
               <i class="fa-light fa-comment" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">45</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-arrows-retweet" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">5K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-heart" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">14K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-solid fa-chart-simple" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">30K</p>
            </div>
            <div class="col-4 p-0"><i class="fa-light fa-bookmark" style="padding-left: 5%; color:#969696;"></i><i class="fa-light fa-arrow-up-from-bracket" style="padding-left: 10%; color:#969696;"></i></div>
         </div>
      </div>
      <!--Credit-->
      <div class="col-1 col-md-1 col-lg-1">
         <a href="https://toyhou.se/RegEx" data-toggle="tooltip" title="Code by RegEx">
         <i class="fa-solid fa-ellipsis" style="color:#969696;"></i>
         </a>
      </div>
   </div>
</div>
<!--QUOTE TWEET-->
<div class="container" style="max-width: 600px; min-width: 350px; background-color: #000000; padding: 0px; margin-top: 10px; border: 1px solid gray;">
   <div class="row" style="padding: 15px;">
      <!--Image-->
      <div class="col-3 col-md-2 col-lg-2">
         <img src="
            https://placehold.jp/50x50.png" class="img-fluid" style="width: 50px; height: 50px; border-radius: 50%;">
      </div>
      <!--Username / Timestamp-->
      <div class="col-7 col-md-9 col-lg-9" style="min-width: 150px;">
         <div class="row">
            <p style="font-weight:600; margin: 0px; color: #ffffff;">Screen Name</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;"><a href="LINK_HERE" style="color: #969696;">@/userName</a></p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">•</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">2d</p>
         </div>
         <!--Content-->
         <div class="row">
            <p style="padding-bottom: 10px; color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
            <div style="border: 1px solid #969696; border-radius: 15px; min-width: 100%;">
               <div style="padding: 10px;">
                  <img src="https://placehold.jp/25x25.png" class="img-fluid" style="width: 25px; height: 25px; border-radius: 50%;">
                  <p style="font-weight:600; display: inline; color: #ffffff">Screen Name</p>
                  <p style="color: #969696; font-weight: 300;  display: inline;"><a href="LINK_HERE" style="color: #969696;">@/userName</a></p>
                  <p style="color: #969696; font-weight: 300;  display: inline;">•</p>
                  <p style="color: #969696; font-weight: 300;  display: inline;">2d</p>
                  <p style="color: #ffffff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
               </div>
            </div>
         </div>
         <!--Stats-->
         <div class="row" style="padding-top: 10px; min-width: 300px;">
            <div class="col-2 p-0">
               <i class="fa-light fa-comment" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">45</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-arrows-retweet" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">5K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-heart" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">14K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-solid fa-chart-simple" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">30K</p>
            </div>
            <div class="col-4 p-0"><i class="fa-light fa-bookmark" style="padding-left: 5%; color:#969696;"></i><i class="fa-light fa-arrow-up-from-bracket" style="padding-left: 10%; color:#969696;"></i></div>
         </div>
      </div>
      <!--Credit-->
      <div class="col-1 col-md-1 col-lg-1">
         <a href="https://toyhou.se/RegEx" data-toggle="tooltip" title="Code by RegEx">
         <i class="fa-solid fa-ellipsis" style="color:#969696;"></i>
         </a>
      </div>
   </div>
</div>
<!--THREAD-->
<div class="container" style="max-width: 600px; min-width: 350px; background-color: #000000; padding: 0px; margin-top: 10px; border: 1px solid gray;">
   <!--Stupid line thing...?-->
   <div class="row" style="padding: 15px;">
      <!--Image-->
      <div class="col-3 col-md-2 col-lg-2" style="position: relative; min-width: 90px;">
         <img src="https://placehold.jp/50x50.png" class="img-fluid" style="width: 50px; height: 50px; border-radius: 50%;">
         <div style="border-left: 1px solid #969696; position: absolute; height: 70%; left: 40px; top: 55px;"></div>
      </div>
      <!--Username / Timestamp-->
      <div class="col-7 col-md-9 col-lg-9" style="min-width: 150px;">
         <div class="row">
            <p style="font-weight:600; margin: 0px; color: #ffffff;">Screen Name</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;"><a href="LINK_HERE" style="color: #969696;">@/userName</a></p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">•</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">2d</p>
         </div>
         <!--Content-->
         <div class="row">
            <p style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
         </div>
         <!--Stats-->
         <div class="row" style="padding-top: 10px; min-width: 300px;">
            <div class="col-2 p-0">
               <i class="fa-light fa-comment" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">45</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-arrows-retweet" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">5K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-heart" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">14K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-solid fa-chart-simple" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">30K</p>
            </div>
            <div class="col-4 p-0"><i class="fa-light fa-bookmark" style="padding-left: 5%; color:#969696;"></i><i class="fa-light fa-arrow-up-from-bracket" style="padding-left: 10%; color:#969696;"></i></div>
         </div>
      </div>
      <!--Credit-->
      <div class="col-1 col-md-1 col-lg-1">
         <a href="https://toyhou.se/RegEx" data-toggle="tooltip" title="Code by RegEx">
         <i class="fa-solid fa-ellipsis" style="color:#969696;"></i>
         </a>
      </div>
   </div>
   <div class="row" style="padding: 15px;">
      <!--Image-->
      <div class="col-3 col-md-2 col-lg-2">
         <img src="https://placehold.jp/50x50.png" class="img-fluid" style="width: 50px; height: 50px; border-radius: 50%;">
      </div>
      <!--Username / Timestamp-->
      <div class="col-7 col-md-9 col-lg-9" style="min-width: 150px;">
         <div class="row">
            <p style="font-weight:600; margin: 0px; color: #ffffff;">Screen Name</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;"><a href="LINK_HERE" style="color: #969696;">@/userName</a></p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">•</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">2d</p>
         </div>
         <!--Content-->
         <div class="row">
            <p style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
         </div>
         <!--Stats-->
         <div class="row" style="padding-top: 10px; min-width: 300px;">
            <div class="col-2 p-0">
               <i class="fa-light fa-comment" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">45</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-arrows-retweet" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">5K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-heart" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">14K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-solid fa-chart-simple" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">30K</p>
            </div>
            <div class="col-4 p-0"><i class="fa-light fa-bookmark" style="padding-left: 5%; color:#969696;"></i><i class="fa-light fa-arrow-up-from-bracket" style="padding-left: 10%; color:#969696;"></i></div>
         </div>
      </div>
      <!--Credit-->
      <div class="col-1 col-md-1 col-lg-1">
         <a href="https://toyhou.se/RegEx" data-toggle="tooltip" title="Code by RegEx">
         <i class="fa-solid fa-ellipsis" style="color:#969696;"></i>
         </a>
      </div>
   </div>
</div>
<!--IMG QRT-->
<div class="container" style="max-width: 600px; min-width: 350px; background-color: #000000; padding: 0px; margin-top: 10px; border: 1px solid gray;">
   <div class="row" style="padding: 15px;">
      <!--Image-->
      <div class="col-3 col-md-2 col-lg-2">
         <img src="
            https://placehold.jp/50x50.png" class="img-fluid" style="width: 50px; height: 50px; border-radius: 50%;">
      </div>
      <!--Username / Timestamp-->
      <div class="col-7 col-md-9 col-lg-9" style="min-width: 150px;">
         <div class="row">
            <p style="font-weight:600; margin: 0px; color: #ffffff;">Screen Name</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;"><a href="LINK_HERE" style="color: #969696;">@/userName</a></p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">•</p>
            <p style="color: #969696; font-weight: 300; padding-left: 5px; margin: 0px;">2d</p>
         </div>
         <!--Content-->
         <div class="row">
            <p style="padding-bottom: 10px; color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
            <div style="border: 1px solid #969696; border-radius: 15px; min-width: 100%;">
               <div style="padding: 10px;">
                  <img src="https://placehold.jp/50x50.png" class="img-fluid" style="width: 25px; height: 25px; border-radius: 50%;">
                  <p style="font-weight:600; display: inline; color: #ffffff;">Screen Name</p>
                  <p style="color: #969696; font-weight: 300; display: inline;"><a href="LINK_HERE" style="color: #969696;">@/userName</a></p>
                  <p style="color: #969696; font-weight: 300; display: inline;">•</p>
                  <p style="color: #969696; font-weight: 300; display: inline;">2d</p>
                  <p style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
               </div>
               <img src="https://placehold.jp/450x300.png" style="border-radius: 0px 0px 15px 15px; width: 450px; object-fit: cover;">
            </div>
         </div>
         <!--Stats-->
         <div class="row" style="padding-top: 10px; min-width: 300px;">
            <div class="col-2 p-0">
               <i class="fa-light fa-comment" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">45</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-arrows-retweet" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">5K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-light fa-heart" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">14K</p>
            </div>
            <div class="col-2 p-0">
               <i class="fa-solid fa-chart-simple" style="padding-right: 5px; color:#969696;"></i>
               <p style="display:inline; color:#969696; font-weight: 300;">30K</p>
            </div>
            <div class="col-4 p-0"><i class="fa-light fa-bookmark" style="padding-left: 5%; color:#969696;"></i><i class="fa-light fa-arrow-up-from-bracket" style="padding-left: 10%; color:#969696;"></i></div>
         </div>
      </div>
      <!--Credit-->
      <div class="col-1 col-md-1 col-lg-1">
         <a href="https://toyhou.se/RegEx" data-toggle="tooltip" title="Code by RegEx">
         <i class="fa-solid fa-ellipsis" style="color:#969696;"></i>
         </a>
      </div>
   </div>
</div>