API tools faq
paste
Advertisement
shadiff

LS10

shadiff
Mar 31st, 2021
45
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.11 KB | None | 0 0
raw download clone embed print report
  1. <div className="bg-blue-200 font-sans leading-normal tracking-normal">
  2. <div className="w-full m-0 p-0 bg-cover bg-bottom" style={{backgroundImage: 'url("cover.jpg")', height: '60vh', maxHeight: 460}}>
  3. <div className="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
  4. <p className="text-blue-800 font-extrabold text-3xl md:text-5xl">
  5. Nerdscript
  6. </p>
  7. <p className="text-xl md:text-2xl text-gray-500">Welcome to my Blog</p>
  8. </div>
  9. </div>
  10. <div className="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
  11. <div className="mx-0 sm:mx-6">
  12. <nav className="mt-0 w-full">
  13. <div className="container mx-auto flex items-center">
  14. <div className="flex w-1/2 pl-4 text-sm">
  15. <ul className="list-reset flex justify-between flex-1 md:flex-none items-center">
  16. <li className="mr-2">
  17. <a className="inline-block py-2 px-2 text-blue-800 no-underline hover:underline" href="post.html">POST</a>
  18. </li>
  19. <li className="mr-2">
  20. <a className="inline-block text-gray-600 no-underline hover:text-blue-500 hover:underline py-2 px-2" href="#">Techonology</a>
  21. </li>
  22. <li className="mr-2">
  23. <a className="inline-block text-gray-600 no-underline hover:text-blue-500 hover:underline py-2 px-2" href="#">Finance</a>
  24. </li>
  25. <li className="mr-2">
  26. <a className="inline-block text-gray-600 no-underline hover:text-blue-500 hover:underline py-2 px-2" href="post_vue.html">Developer</a>
  27. </li>
  28. </ul>
  29. </div>
  30. <div className="flex w-1/2 justify-end content-center">
  31. <a className="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="@twitter_handle" href="https://twitter.com/intent/tweet?url=#">
  32. <svg className="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z" /></svg>
  33. </a>
  34. <a className="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#">
  35. <svg className="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z" /></svg>
  36. </a>
  37. </div>
  38. </div>
  39. </nav>
  40. <div className="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
  41. <div className="flex h-full bg-white rounded overflow-hidden shadow-lg">
  42. <a href="post.html" className="flex flex-wrap no-underline hover:no-underline">
  43. <div className="w-full md:w-2/3 rounded-t">
  44. <img src="https://source.unsplash.com/collection/494263/800x600" className="h-full w-full shadow" />
  45. </div>
  46. <div className="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
  47. <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  48. <p className="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">GETTING STARTED</p>
  49. <div className="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome Lorem Ipsum</div>
  50. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  51. Lorem ipsum paragraph here.
  52. </p>
  53. </div>
  54. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  55. <div className="flex items-center justify-between">
  56. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author" />
  57. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  58. </div>
  59. </div>
  60. </div>
  61. </a>
  62. </div>
  63. <div className="flex flex-wrap justify-between pt-12 -mx-6">
  64. <div className="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
  65. <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  66. <a href="#" className="flex flex-wrap no-underline hover:no-underline">
  67. <img src="https://source.unsplash.com/collection/225/800x600" className="h-64 w-full rounded-t pb-6" />
  68. <p className="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
  69. <div className="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
  70. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  71. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
  72. </p>
  73. </a>
  74. </div>
  75. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  76. <div className="flex items-center justify-between">
  77. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="" alt="Avatar of Author" />
  78. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  79. </div>
  80. </div>
  81. </div>
  82. <div className="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
  83. <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  84. <a href="#" className="flex flex-wrap no-underline hover:no-underline">
  85. <img src="https://source.unsplash.com/collection/3106804/800x600" className="h-64 w-full rounded-t pb-6" />
  86. <p className="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
  87. <div className="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
  88. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  89. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ip Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
  90. </p>
  91. </a>
  92. </div>
  93. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  94. <div className="flex items-center justify-between">
  95. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author" />
  96. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  97. </div>
  98. </div>
  99. </div>
  100. <div className="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
  101. <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  102. <a href="#" className="flex flex-wrap no-underline hover:no-underline">
  103. <img src="https://source.unsplash.com/collection/539527/800x600" className="h-64 w-full rounded-t pb-6" />
  104. <p className="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
  105. <div className="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
  106. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  107. Lorem ipsum eu nunc commodo posuere et sit amet ligula.
  108. </p>
  109. </a>
  110. </div>
  111. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  112. <div className="flex items-center justify-between">
  113. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author" />
  114. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  115. </div>
  116. </div>
  117. </div>
  118. <div className="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
  119. <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  120. <a href="#" className="flex flex-wrap no-underline hover:no-underline">
  121. <img src="https://source.unsplash.com/collection/3657445/800x600" className="h-full w-full rounded-t pb-6" />
  122. <p className="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
  123. <div className="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
  124. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  125. Lorem ipsum eu nunc commodo posuere et sit amet ligula.
  126. </p>
  127. </a>
  128. </div>
  129. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  130. <div className="flex items-center justify-between">
  131. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author" />
  132. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  133. </div>
  134. </div>
  135. </div>
  136. <div className="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
  137. <div className="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  138. <a href="#" className="flex flex-wrap no-underline hover:no-underline">
  139. <img src="https://source.unsplash.com/collection/764827/800x600" className="h-full w-full rounded-t pb-6" />
  140. <p className="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
  141. <div className="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
  142. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  143. Lorem ipsum eu nunc commodo posuere et sit amet ligula.
  144. </p>
  145. </a>
  146. </div>
  147. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  148. <div className="flex items-center justify-between">
  149. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author" />
  150. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  151. </div>
  152. </div>
  153. </div>
  154. <div className="w-full md:w-2/3 p-6 flex flex-col flex-grow flex-shrink">
  155. <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  156. <a href="#" className="flex flex-wrap no-underline hover:no-underline">
  157. <img src="https://source.unsplash.com/collection/325867/800x600" className="h-full w-full rounded-t pb-6" />
  158. <p className="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
  159. <div className="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
  160. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  161. Lorem ipsum eu nunc commodo posuere et sit amet ligula.
  162. </p>
  163. </a>
  164. </div>
  165. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  166. <div className="flex items-center justify-between">
  167. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author" />
  168. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  169. </div>
  170. </div>
  171. </div>
  172. <div className="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
  173. <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
  174. <a href="#" className="flex flex-wrap no-underline hover:no-underline">
  175. <img src="https://source.unsplash.com/collection/1118905/800x600" className="h-full w-full rounded-t pb-6" />
  176. <p className="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
  177. <div className="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
  178. <p className="text-gray-800 font-serif text-base px-6 mb-5">
  179. Lorem ipsum eu nunc commodo posuere et sit amet ligula.
  180. </p>
  181. </a>
  182. </div>
  183. <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
  184. <div className="flex items-center justify-between">
  185. <img className="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author" />
  186. <p className="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. <div className="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
  193. <h2 className="font-bold break-normal text-2xl md:text-4xl">Subscribe to Nerdscript</h2>
  194. <h3 className="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3>
  195. <div className="w-full text-center pt-4">
  196. <form action="#">
  197. <div className="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center">
  198. <input type="email" placeholder="[email protected]" className="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none" />
  199. <button type="submit" className="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
  200. </div>
  201. </form>
  202. </div>
  203. </div>
  204. <div className="flex w-full items-center font-sans p-8 md:p-24">
  205. <img className="w-10 h-10 rounded-full mr-4" src="" alt="Avatar of Author" />
  206. <div className="flex-1">
  207. <p className="text-base font-bold text-base md:text-xl leading-none">Nerdscript</p>
  208. <p className="text-gray-600 text-xs md:text-base">Lorem Ipsum <a className="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="#0">.com</a></p>
  209. </div>
  210. <div className="justify-end">
  211. <button className="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read More</button>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. <footer className="bg-gray-900">
  217. <div className="container max-w-6xl mx-auto flex items-center px-2 py-8">
  218. <div className="w-full mx-auto flex flex-wrap items-center">
  219. <div className="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
  220. <a className="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#">
  221. <span className="text-base text-gray-200">Nerdscript</span>
  222. </a>
  223. </div>
  224. <div className="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
  225. <ul className="list-reset flex justify-center flex-1 md:flex-none items-center">
  226. <li>
  227. <a className="inline-block py-2 px-3 text-white no-underline" href="#">Active</a>
  228. </li>
  229. <li>
  230. <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
  231. </li>
  232. <li>
  233. <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
  234. </li>
  235. <li>
  236. <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
  237. </li>
  238. </ul>
  239. </div>
  240. </div>
  241. </div>
  242. </footer>
  243. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!