ethox/markdowncmsaurus-rex
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>MarkdownCMSaurus - Blog</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 100: '#f0f9ff',17 500: '#0ea5e9',18 900: '#082f49'19 },20 secondary: {21 100: '#ecfdf5',22 500: '#10b981',23 900: '#064e3b'24 }25 }26 }27 }28 }29 </script>30 <style>31 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');32 body {33 font-family: 'Inter', sans-serif;34 }35 </style>36</head>37<body class="bg-gray-50 min-h-screen">38 <div id="app">39 <!-- Navigation -->40 <nav class="bg-white shadow-sm">41 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">42 <div class="flex justify-between h-16">43 <div class="flex">44 <div class="flex-shrink-0 flex items-center">45 <i data-feather="file-text" class="text-secondary-500 h-6 w-6"></i>46 <span class="ml-2 text-xl font-bold text-gray-900">MarkdownCMSaurus</span>47 </div>48 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">49 <a href="blog.html" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">50 Blog51 </a>52 <a href="admin.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">53 Admin54 </a>55 </div>56 </div>57 <div class="hidden sm:ml-6 sm:flex sm:items-center">58 <a href="admin.html" class="bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded-md text-sm font-medium text-white">59 Sign In60 </a>61 </div>62 </div>63 </div>64 </nav>65 66 <!-- Blog Content -->67 <div class="py-12 bg-white">68 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">69 <div class="lg:text-center mb-12">70 <h2 class="text-base text-primary-500 font-semibold tracking-wide uppercase">Blog</h2>71 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">72 Latest Articles73 </p>74 </div>75 76 <div class="grid gap-16 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">77 <!-- Blog Post 1 -->78 <div class="bg-white overflow-hidden shadow rounded-lg">79 <div class="p-5">80 <div class="flex items-center">81 <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-primary-100 text-primary-800">82 Tutorial83 </span>84 <div class="ml-3 text-sm text-gray-500">85 <time datetime="2023-05-16">May 16, 2023</time>86 </div>87 </div>88 <a href="#" class="block mt-4">89 <h3 class="text-xl font-semibold text-gray-900">90 Getting Started with MarkdownCMSaurus91 </h3>92 <p class="mt-3 text-base text-gray-500">93 Learn how to set up your first MarkdownCMSaurus project and start publishing content right away.94 </p>95 </a>96 <div class="mt-6 flex items-center">97 <div class="flex-shrink-0">98 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="Author">99 </div>100 <div class="ml-3">101 <p class="text-sm font-medium text-gray-900">102 Jane Cooper103 </p>104 <div class="flex space-x-1 text-sm text-gray-500">105 <span>10 min read</span>106 <span aria-hidden="true">·</span>107 <span>5 min read</span>108 </div>109 </div>110 </div>111 </div>112 </div>113 114 <!-- Blog Post 2 -->115 <div class="bg-white overflow-hidden shadow rounded-lg">116 <div class="p-5">117 <div class="flex items-center">118 <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-secondary-100 text-secondary-800">119 Guide120 </span>121 <div class="ml-3 text-sm text-gray-500">122 <time datetime="2023-05-10">May 10, 2023</time>123 </div>124 </div>125 <a href="#" class="block mt-4">126 <h3 class="text-xl font-semibold text-gray-900">127 Advanced Content Workflows128 </h3>129 <p class="mt-3 text-base text-gray-500">130 Discover how to implement advanced workflows for your content team with our CMS.131 </p>132 </a>133 <div class="mt-6 flex items-center">134 <div class="flex-shrink-0">135 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="Author">136 </div>137 <div class="ml-3">138 <p class="text-sm font-medium text-gray-900">139 John Smith140 </p>141 <div class="flex space-x-1 text-sm text-gray-500">142 <span>15 min read</span>143 <span aria-hidden="true">·</span>144 <span>8 min read</span>145 </div>146 </div>147 </div>148 </div>149 </div>150 151 <!-- Blog Post 3 -->152 <div class="bg-white overflow-hidden shadow rounded-lg">153 <div class="p-5">154 <div class="flex items-center">155 <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-primary-100 text-primary-800">156 Migration157 </span>158 <div class="ml-3 text-sm text-gray-500">159 <time datetime="2023-05-05">May 5, 2023</time>160 </div>161 </div>162 <a href="#" class="block mt-4">163 <h3 class="text-xl font-semibold text-gray-900">164 Migrating from WordPress165 </h3>166 <p class="mt-3 text-base text-gray-500">167 A comprehensive guide to migrating your WordPress content to MarkdownCMSaurus.168 </p>169 </a>170 <div class="mt-6 flex items-center">171 <div class="flex-shrink-0">172 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="Author">173 </div>174 <div class="ml-3">175 <p class="text-sm font-medium text-gray-900">176 Sarah Johnson177 </p>178 <div class="flex space-x-1 text-sm text-gray-500">179 <span>20 min read</span>180 <span aria-hidden="true">·</span>181 <span>12 min read</span>182 </div>183 </div>184 </div>185 </div>186 </div>187 188 <!-- Blog Post 4 -->189 <div class="bg-white overflow-hidden shadow rounded-lg">190 <div class="p-5">191 <div class="flex items-center">192 <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-secondary-100 text-secondary-800">193 Tutorial194 </span>195 <div class="ml-3 text-sm text-gray-500">196 <time datetime="2023-04-28">Apr 28, 2023</time>197 </div>198 </div>199 <a href="#" class="block mt-4">200 <h3 class="text-xl font-semibold text-gray-900">201 Customizing Your Theme202 </h3>203 <p class="mt-3 text-base text-gray-500">204 Learn how to customize the look and feel of your MarkdownCMSaurus site with our theme system.205 </p>206 </a>207 <div class="mt-6 flex items-center">208 <div class="flex-shrink-0">209 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/4" alt="Author">210 </div>211 <div class="ml-3">212 <p class="text-sm font-medium text-gray-900">213 Michael Brown214 </p>215 <div class="flex space-x-1 text-sm text-gray-500">216 <span>12 min read</span>217 <span aria-hidden="true">·</span>218 <span>6 min read</span>219 </div>220 </div>221 </div>222 </div>223 </div>224 </div>225 226 <!-- Pagination -->227 <div class="mt-12 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">228 <div class="-mt-px flex w-0 flex-1">229 <a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">230 <i data-feather="arrow-left" class="mr-3 h-5 w-5 text-gray-400"></i>231 Previous232 </a>233 </div>234 <div class="hidden md:-mt-px md:flex">235 <a href="#" class="inline-flex items-center border-t-2 border-primary-500 px-4 pt-4 text-sm font-medium text-primary-600">236 1237 </a>238 <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">239 2240 </a>241 <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">242 3243 </a>244 </div>245 <div class="-mt-px flex w-0 flex-1 justify-end">246 <a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">247 Next248 <i data-feather="arrow-right" class="ml-3 h-5 w-5 text-gray-400"></i>249 </a>250 </div>251 </div>252 </div>253 </div>254 255 <!-- Footer -->256 <footer class="bg-white">257 <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">258 <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">259 <div class="px-5 py-2">260 <a href="#" class="text-base text-gray-500 hover:text-gray-900">261 Documentation262 </a>263 </div>264 <div class="px-5 py-2">265 <a href="#" class="text-base text-gray-500 hover:text-gray-900">266 GitHub267 </a>268 </div>269 <div class="px-5 py-2">270 <a href="#" class="text-base text-gray-500 hover:text-gray-900">271 Twitter272 </a>273 </div>274 <div class="px-5 py-2">275 <a href="blog.html" class="text-base text-gray-500 hover:text-gray-900">276 Blog277 </a>278 </div>279 </nav>280 <div class="mt-8 flex justify-center space-x-6">281 <a href="#" class="text-gray-400 hover:text-gray-500">282 <i data-feather="github" class="h-6 w-6"></i>283 </a>284 <a href="#" class="text-gray-400 hover:text-gray-500">285 <i data-feather="twitter" class="h-6 w-6"></i>286 </a>287 <a href="#" class="text-gray-400 hover:text-gray-500">288 <i data-feather="mail" class="h-6 w-6"></i>289 </a>290 </div>291 <p class="mt-8 text-center text-base text-gray-400">292 © 2023 MarkdownCMSaurus. Open source with MIT license.293 </p>294 </div>295 </footer>296 </div>297 298 <script>299 feather.replace();300 </script>301</body>302</html>