API tools faq
paste
OneAlbatross

Cityside User Profile - Tailwind

OneAlbatross
Nov 12th, 2022
322
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.58 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <div class="grid md:grid-cols-3 ">
  3.  
  4. <!-- FIRST COLUMN SECTION -->
  5. <div class="col-span-1 p-4 mb-0 w-full bg-black bg-opacity-75 mx-auto text-center text-gray-100">
  6.  
  7. <!-- This is the profile picture -->
  8. <img class="rounded-sm mx-auto mt-4 mb-4 w-3/5 md:w-3/5 lg:w-3/4 xl:w-3/4 " src="IMAGE_LINK_HERE">
  9.  
  10. <!-- Here's the subheader for all those extra bits of personal info -->
  11. <h2>Username</h2>
  12. <h5>extras / lvl / mbt</h4>
  13.  
  14. <div class="bg-white bg-opacity-30 mb-3 mt-4" style="height: 2px"></div>
  15.  
  16. <!-- This is the music player area -->
  17. <div class="pl-1">
  18. <div class="text-center mt-1 float-left mr-3" style="height: 44px; width: 44px; background-image: url('ALBUM_ART_IMAGE_LINK_HERE'); background-size: cover; background-position: center">
  19. <!-- This is the album art and play button div. -->
  20. <!-- Songs have to be from Youtube; click share button > the jumble of letter and number after the 'https://youtu.be/" is what you want to copy paste here, after the "/embed/"-->
  21. <!-- add "?start=#" to the end of the url and replace # with a number to have the music start at that number of seconds into the video; EXAMPLE: https://www.youtube.com/embed/PJ8IBPpzToc?start=40 -->
  22. <iframe class="opacity-5 -mb-8" style="width: 44px; height: 44px" src="https://www.youtube.com/embed/"></iframe>
  23. <!-- This is the little play button icon. It can be changed to another fontawesome icon or changed color. -->
  24. <i class="fas fa-play "></i>
  25. </div>
  26.  
  27. <div class="px-3 mb-4 text-left ">
  28. <!-- Song and artist name. If you want to link to the song or artist, put a <a href="LINK_HERE"> on the left side of the text and </a> on the other -->
  29. <h4>SONG NAME</h4><p>ARTIST NAME</p>
  30. </div>
  31.  
  32. </div>
  33. <!-- END of music player area -->
  34.  
  35. <!-- This is the ART STATUS section. Labels and their status' can be changed here. They are all set to "closed" by default. -->
  36. <div class="bg-white bg-opacity-30 my-3" style="height: 2px"></div>
  37.  
  38. <div class="grid grid-cols-2 gap-2 ">
  39. <div>
  40. <h5 class="tracking-widest">Coms</h5>
  41. <div class="tracking-widest inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white-100 bg-cyan-700 rounded-full">closed</div>
  42. </div>
  43. <div>
  44. <h5 class="tracking-widest">Trades</h5>
  45. <div class="tracking-widest inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white-100 bg-cyan-700 rounded-full">closed</div>
  46. </div>
  47. </div>
  48. <div class="mt-3 grid grid-cols-2 gap-2">
  49. <div>
  50. <h5 class="tracking-widest ">Requests</h5>
  51. <div class="tracking-widest inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white-100 bg-cyan-700 rounded-full">closed</div>
  52. </div>
  53. <div>
  54. <h5 class="tracking-widest">Wait list</h5>
  55. <div class="tracking-widest inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white-100 bg-cyan-700 rounded-full">closed</div>
  56. </div>
  57. </div>
  58.  
  59. <div class="bg-white bg-opacity-30 mb-3 mt-4" style="height: 2px"></div>
  60. <!-- End of art status section -->
  61.  
  62.  
  63.  
  64. <div class="flex flex-row-auto gap-2 justify-around mt-3">
  65. <a class="rounded-md text-center p-2 text-gray-300 hover:text-white" href="LINK_HERE" rel="nofollow"><i class="fab fa-instagram fa-md"></i></a>
  66. <a class="rounded-md text-center p-2 text-gray-300 hover:text-white" href="LINK_HERE" rel="nofollow"><i class="fab fa-twitter fa-md"></i></a>
  67. <a class="rounded-md text-center p-2 text-gray-300 hover:text-white" href="LINK_HERE" rel="nofollow"><i class="fab fa-spotify fa-md"></i></a>
  68. <a class="rounded-md text-center p-2 text-gray-300 hover:text-white" href="LINK_HERE" rel="nofollow"><i class="fas fa-home-alt fa-md"></i></a>
  69. <!-- This is the code credit button. You may move it around and recolor it, but please leave it plainly visible and don't remove -->
  70. <a class="rounded-md text-center p-2 text-gray-300 hover:text-white" href="https://buzzly.art/~OneAlbatross" title="Code by OneAlbatross" rel="nofollow"><i class="fad fa-code fa-md"></i></a>
  71.  
  72. </div>
  73. <!-- END of the links section -->
  74. </div>
  75. <!-- END of first column-->
  76.  
  77.  
  78.  
  79.  
  80. <!-- THis is the SECOND COLUMN -->
  81.  
  82. <!-- STAMP section. -->
  83. <div class="md:col-span-2 mt-4 md:mt-0 px-4 w-full mb-0 mx-auto text-center text-gray-100 self-center">
  84. <!-- This is designed to make 4 or 5 stamps fit neatly in this row so adding more images to it will make them smaller and smaller. If you would like to use more than 5 stamps, instead duplicate this whole div and insert below the current div. -->
  85. <div class="flex flex-row gap-1 justify-center mb-2">
  86. <a href="LINK_TO_SOURCE" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" src="IMAGE_ADDRESS_LINK"></a>
  87. <a href="LINK_TO_SOURCE" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" src="IMAGE_ADDRESS_LINK"></a>
  88. <a href="LINK_TO_SOURCE" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" src="IMAGE_ADDRESS_LINK"></a>
  89. <a href="LINK_TO_SOURCE" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" src="IMAGE_ADDRESS_LINK"></a>
  90. <a href="LINK_TO_SOURCE" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" src="IMAGE_ADDRESS_LINK"></a>
  91. </div>
  92. <!-- END of stamp section -->
  93.  
  94.  
  95.  
  96. <!-- This is the NOTICE box div. You may remove it by simply deleting from HERE to the END -->
  97. <div class="px-4 pb-2 pt-3 bg-black bg-opacity-75 ">
  98.  
  99. <div class="text-left">
  100. <div class="overflow-auto" style="height: 48px">
  101. <div class="float-left mr-2 animate-pulse"><b>Notice: </b></div>
  102. <p>Opt. update/news box for things such as raffles, comm delays, and hiatus anouncements. </p>
  103. </div>
  104. </div>
  105. </div>
  106. <!-- END of NOTICE box div -->
  107.  
  108. <!-- ABOUT box div -->
  109. <div class="px-4 py-2 mt-2 bg-black bg-opacity-75 ">
  110.  
  111. <div class="text-left">
  112. <h5>About/info</h5>
  113. <div class="mt-1 overflow-auto" style="height: 80px">
  114. <p>This text box will scroll if your text becomes long enough. You can say a little about yourself, like and dislikes, interests, hobbies, ect.
  115. </p>
  116. </div>
  117. </div>
  118.  
  119. </div>
  120. <!-- END of ABOUT box div-->
  121.  
  122.  
  123. <div class="grid grid-cols-2 gap-2">
  124.  
  125. <!-- CURRENT INTERESTS box div -->
  126. <div class="col-span-2 md:col-span-1 p-4 bg-black mt-2 bg-opacity-75 ">
  127.  
  128. <div class="text-left">
  129. <h5>Current Interests</h5>
  130. <div class="overflow-auto mt-2" style="height: 120px">
  131. <p>
  132. <ul class="list-none">
  133. <li><i class="fad fa-angle-right mr-2"></i>ACNH</li>
  134. <li><i class="fad fa-angle-right mr-2"></i>Minecraft</li>
  135. <li><i class="fad fa-angle-right mr-2"></i>Coding nonsense</li>
  136. <li><i class="fad fa-angle-right mr-2"></i>Daydreaming</li>
  137. <li><i class="fad fa-angle-right mr-2"></i>Running in circles</li>
  138. </ul>
  139. </p>
  140. </div>
  141. </div>
  142. </div>
  143. <!-- END of CURRENT INTERESTS box div -->
  144.  
  145. <!-- PEOPLE (shout outs, friends, fav artists, etc) box div -->
  146. <div class="col-span-2 md:col-span-1 p-4 bg-black mt-2 bg-opacity-75 ">
  147.  
  148. <div class="text-left">
  149. <h5>Some People</h5>
  150. <div class="overflow-auto mt-2 " style="height: 120px">
  151. <div class="grid grid-cols-3 justify-items-center gap-3 pt-1">
  152. <!-- You can add more people by duplicating a <a>..</a> section and inserting beneath. They should pop down to the next row automatically and the box itself should start to scroll if the rows get too tall -->
  153. <a href="LINK_TO_PERSON" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" style="width: 50px; height: 50px" src="PFP_IMAGE_LINK" title="TEXT_that_appears_on_hover"></a>
  154. <a href="LINK_TO_PERSON" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" style="width: 50px; height: 50px" src="PFP_IMAGE_LINK" title="TEXT_that_appears_on_hover"></a>
  155. <a href="LINK_TO_PERSON" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" style="width: 50px; height: 50px" src="PFP_IMAGE_LINK" title="TEXT_that_appears_on_hover"></a>
  156. <a href="LINK_TO_PERSON" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" style="width: 50px; height: 50px" src="PFP_IMAGE_LINK" title="TEXT_that_appears_on_hover"></a>
  157. <a href="LINK_TO_PERSON" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" style="width: 50px; height: 50px" src="PFP_IMAGE_LINK" title="TEXT_that_appears_on_hover"></a>
  158. <a href="LINK_TO_PERSON" rel="nofollow"><img class="transition duration-300 ease-in-out transform hover:scale-105" style="width: 50px; height: 50px" src="PFP_IMAGE_LINK" title="TEXT_that_appears_on_hover"></a>
  159. </div>
  160. </div>
  161. </div>
  162. <!-- END of PEOPLE box div -->
  163.  
  164. </div>
  165.  
  166.  
  167. <!-- EXTRA BUTTONS section -->
  168. </div>
  169. <div class="grid grid-cols-3 gap-3 my-2">
  170. <!-- These are a couple of extra buttons for things you might want labeled and obvious such as T.O.S., Toyhouse purges/adopts for sale, a carrd, etc, etc, etc. -->
  171. <div class="p-2 bg-black bg-opacity-75"><a href="LINK_HERE" class="hover:text-gray-300"><h5>Characters</h5></a></div>
  172. <div class="p-2 bg-black bg-opacity-75"><a href="LINK_HERE" class="hover:text-gray-300"><h5>For Sale</h5></a></div>
  173. <div class="p-2 bg-black bg-opacity-75"><a href="LINK_HERE" class="hover:text-gray-300"><h5>T.O.S.</h5></a></div>
  174. </div>
  175. <!-- END of EXTRA BUTTONS section -->
  176.  
  177.  
  178. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!