API tools faq
paste
OneAlbatross

5 minute art meme -Tailwind code conversion

OneAlbatross
Feb 6th, 2022 (edited)
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.00 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <div class="rounded-md p-4 m-5 text-gray-800 bg-white bg-opacity-85 font-mono"><!-- this contains the controls for the overall text color, font, background color, and background opacity -->
  3. <div class="grid grid-cols-2 gap-x-4 ">
  4.  
  5. <div class="col md:col-span-1 col-span-2 px-4 pb-4 grid-rows-auto text-center ">
  6.  
  7. <h3>5 minute artist meme</h3>
  8.  
  9. <div class="flex flex-row my-3 text-lg text-left ml-5 font-semibold">
  10. <p class="mr-3">Name:</p>
  11. <div class="flex-grow text-center mr-4">Yourname
  12. <div class="w-full" style="height: 3px; background-color: rgb(10,10,10)"></div>
  13. </div>
  14. </div>
  15.  
  16. <!-- IMPORTANT INSTRUCTIONS:-->
  17. <!-- the way I got this code to work is by making the icon's position absolute. To make the icon slide left or right the ONLY thing you need to touch is "left-0" within <i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i> -->
  18. <!-- left-0 means "place the icon 0 away from the left" so the larger the number, the furhter away it gets from the left. There is a caveat though: Tailwind only allows specific numbers to be used. YOU CAN ONLY USE THE NUMBERS SPECIFIED HERE: https://v2.tailwindcss.com/docs/width -->
  19. <!-- A quick cheat sheet: -->
  20. <!-- left-0, left-8, left-16, left-24, left-32, left-40, left-48, left-54, left-60, right-0 -->
  21. <!-- left-0 is the furthest left, left-32 is pretty much HALF, and right-0 is farthest right-->
  22.  
  23. <!-- you can also change the color of the slider/icon and it's shape (see the blog mentioned at the beginning for more details on changing them) -->
  24.  
  25. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">seven stages of prep</span><span class="float-right " style="height: 12px">straight to line art</span></div>
  26.  
  27. <div class=" py-2 w-full">
  28. <div class="w-full flex flex-row relative">
  29. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  30. <div class="bg-black" style="height: 30px; width: 3px"></div>
  31. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  32. <div class="bg-black" style="height: 30px; width: 3px"></div>
  33. </div>
  34. </div>
  35.  
  36. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">flats only</span><span class="float-right " style="height: 12px">render everything</span></div>
  37.  
  38. <div class=" py-2 w-full">
  39. <div class="w-full flex flex-row relative">
  40. <!-- SLIDER POSITION & COLOR--> <i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  41. <div class="bg-black" style="height: 30px; width: 3px"></div>
  42. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  43. <div class="bg-black" style="height: 30px; width: 3px"></div>
  44. </div>
  45. </div>
  46.  
  47. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">no filters/touch ups</span><span class="float-right " style="height: 12px">sixteen layers</span></div>
  48.  
  49. <div class=" py-2 w-full">
  50. <div class="w-full flex flex-row relative">
  51. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  52. <div class="bg-black" style="height: 30px; width: 3px"></div>
  53. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  54. <div class="bg-black" style="height: 30px; width: 3px"></div>
  55. </div>
  56. </div>
  57.  
  58. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">eyedrop colors</span><span class="float-right " style="height: 12px">eyeball colors</span></div>
  59.  
  60. <div class=" py-2 w-full">
  61. <div class="w-full flex flex-row relative">
  62. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  63. <div class="bg-black" style="height: 30px; width: 3px"></div>
  64. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  65. <div class="bg-black" style="height: 30px; width: 3px"></div>
  66. </div>
  67. </div>
  68.  
  69. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">solo portraits</span><span class="float-right " style="height: 12px">70+ ppl group picture</span></div>
  70.  
  71. <div class=" py-2 w-full">
  72. <div class="w-full flex flex-row relative">
  73. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  74. <div class="bg-black" style="height: 30px; width: 3px"></div>
  75. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  76. <div class="bg-black" style="height: 30px; width: 3px"></div>
  77. </div>
  78. </div>
  79.  
  80. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">horror</span><span class="float-right " style="height: 12px">cutesy</span></div>
  81.  
  82. <div class=" py-2 w-full">
  83. <div class="w-full flex flex-row relative">
  84. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  85. <div class="bg-black" style="height: 30px; width: 3px"></div>
  86. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  87. <div class="bg-black" style="height: 30px; width: 3px"></div>
  88. </div>
  89. </div>
  90.  
  91. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">pastel</span><span class="float-right " style="height: 12px">super saturated</span></div>
  92.  
  93. <div class=" py-2 w-full">
  94. <div class="w-full flex flex-row relative">
  95. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  96. <div class="bg-black" style="height: 30px; width: 3px"></div>
  97. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  98. <div class="bg-black" style="height: 30px; width: 3px"></div>
  99. </div>
  100. </div>
  101.  
  102. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">simplicity</span><span class="float-right " style="height: 12px">ornate</span></div>
  103.  
  104. <div class=" py-2 w-full">
  105. <div class="w-full flex flex-row relative">
  106. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  107. <div class="bg-black" style="height: 30px; width: 3px"></div>
  108. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  109. <div class="bg-black" style="height: 30px; width: 3px"></div>
  110. </div>
  111. </div>
  112.  
  113. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">sequential art</span><span class="float-right " style="height: 12px">illustration</span></div>
  114.  
  115. <div class=" py-2 w-full">
  116. <div class="w-full flex flex-row relative">
  117. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  118. <div class="bg-black" style="height: 30px; width: 3px"></div>
  119. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  120. <div class="bg-black" style="height: 30px; width: 3px"></div>
  121. </div>
  122. </div>
  123.  
  124. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">traditional</span><span class="float-right " style="height: 12px">digital</span></div>
  125.  
  126. <div class=" py-2 w-full">
  127. <div class="w-full flex flex-row relative">
  128. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  129. <div class="bg-black" style="height: 30px; width: 3px"></div>
  130. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  131. <div class="bg-black" style="height: 30px; width: 3px"></div>
  132. </div>
  133. </div>
  134.  
  135. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">original</span><span class="float-right " style="height: 12px">fanart</span></div>
  136.  
  137. <div class=" py-2 w-full">
  138. <div class="w-full flex flex-row relative">
  139. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  140. <div class="bg-black" style="height: 30px; width: 3px"></div>
  141. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  142. <div class="bg-black" style="height: 30px; width: 3px"></div>
  143. </div>
  144. </div>
  145.  
  146. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">career</span><span class="float-right " style="height: 12px">hobbyist</span></div>
  147.  
  148. <div class=" py-2 w-full">
  149. <div class="w-full flex flex-row relative">
  150. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  151. <div class="bg-black" style="height: 30px; width: 3px"></div>
  152. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  153. <div class="bg-black" style="height: 30px; width: 3px"></div>
  154. </div>
  155. </div>
  156.  
  157. <div class=" font-semibold text-sm "><span class="float-left mb-2" style="height: 12px">play music/audio in bg</span><span class="float-right " style="height: 12px">silence only</span></div>
  158.  
  159. <div class=" py-2 w-full">
  160. <div class="w-full flex flex-row relative">
  161. <!-- SLIDER POSITION & COLOR--><i class="fad fa-circle fa-2x -mx-3 absolute left-0" style="color: rgba(255,147,131, 1)"></i>
  162. <div class="bg-black" style="height: 30px; width: 3px"></div>
  163. <div class="my-3 w-full bg-black" style="height: 4px"></div>
  164. <div class="bg-black" style="height: 30px; width: 3px"></div>
  165. </div>
  166. </div>
  167.  
  168. </div>
  169.  
  170.  
  171.  
  172. <!-- this is the next column-->
  173.  
  174. <div class="col md:col-span-1 col-span-2 text-center px-4">
  175. <p class="font-semibold">draw yourself!</p>
  176. <!-- IMAGE goes here, copy and image link and place between the parenthesis in url('')--><div class="mx-auto rounded-md mt-2 border-2 border-gray-600" style="background-image: url('IMAGE_LINK_HERE'); height: 200px; width: 200px; background-position: center; background-size: cover"></div>
  177.  
  178. <p class="text-lg mt-4 font-semibold">Fav colors</p>
  179. <div class="flex flex-row justify-items-between gap-3 mt-2">
  180. <!-- These are the three individual colors. Chnage each background-color:rgb() to another rgb value of your choice -->
  181. <div class="flex-grow border-2 border-gray-900 rounded-md" style="background-color: rgb(230, 190, 240); height: 50px"></div>
  182. <div class="flex-grow border-2 border-gray-900 rounded-md" style="background-color: rgb(240, 140, 240); height: 50px"></div>
  183. <div class="flex-grow border-2 border-gray-900 rounded-md" style="background-color: rgb(130, 170, 255); height: 50px"></div>
  184. </div>
  185.  
  186. <p class="text-lg mt-4 font-semibold">Fav color palette</p>
  187. <div class="flex flex-row justify-items-between mt-2 border-2 border-gray-900 rounded-md overflow-hidden" style="height: 35px">
  188. <!-- These are the side by side colors. Chnage each background-color:rgb() to another rgb value of your choice. You can remove a <div>...</div> or copy-paste another under the others to get more or less colors in your palette -->
  189. <div class="flex-grow " style="background-color: rgb(255,147,131)"></div>
  190. <div class="flex-grow " style="background-color: rgb(207,96,219)"></div>
  191. <div class="flex-grow " style="background-color: rgb(132,64,222)"></div>
  192. <div class="flex-grow " style="background-color: rgb(12,28,117)"></div>
  193.  
  194. </div>
  195.  
  196. <p class="text-lg mt-5 font-semibold">Fav things to draw</p>
  197. <ul class="list-disc text-lg">
  198. <li class="border-b-2 mx-4 mt-3">a thing</li>
  199. <li class="border-b-2 mx-4 mt-3">a thing</li>
  200. <li class="border-b-2 mx-4 mt-3">a thing</li>
  201. <li class="border-b-2 mx-4 mt-3">a thing</li>
  202. </ul>
  203.  
  204. <p class="text-lg mt-5 font-semibold">Least fav things to draw</p>
  205. <ul class="list-disc text-lg">
  206. <li class="border-b-2 mx-4 mt-3">a thing</li>
  207. <li class="border-b-2 mx-4 mt-3">a thing</li>
  208. <li class="border-b-2 mx-4 mt-3">a thing</li>
  209. <li class="border-b-2 mx-4 mt-3">a thing</li>
  210. </ul>
  211. </div>
  212.  
  213. </div>
  214.  
  215. <!-- This meme was originally a png template by Olivine arc. I did not come up with this template idea. I did write all the code to make it into an code-based template. please leave credit to olivine arc when using the content/wording and other ideas unique to their template. please leave my credit when using a majority of this code -->
  216. <div class="full-w text-center"><p class="font-semibold">(original template by <a class="hover:text-pink-600">olivine arc/thesummerwars</a> • converted into code by <a class="hover:text-pink-500" href="https://buzzly.art/~OneAlbatross" rel="nofollow"><i class="fas fa-code fa-xs"></i></a> )</p></div>
  217.  
  218. </div>
  219.  
  220.  
  221.  
  222.  
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!