@sujalchoudhari/solaris-ui/templates/blog.html

A UI framework to create HTML pages with just JavaScript.

<section class="dark:bg-gray-800 dark:text-gray-100">
	<div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
		<a rel="noopener noreferrer" href="{{link}}" class="block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 dark:bg-gray-900">
			<img src="{{imgUrl}}" alt="{{imgAlt}}" class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7 dark:bg-gray-500">
			<div class="p-6 space-y-2 lg:col-span-5">
				<h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">{{title}}</h3>
				<span class="text-xs dark:text-gray-400">{{date}}</span>
				<p>{{description}}</p>
			</div>
		</a>
		<div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {{#posts}}
            <a rel="noopener noreferrer" href="{{link}}" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
				<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="{{imgUrl}}">
				<div class="p-6 space-y-2">
					<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">{{title}}</h3>
					<span class="text-xs dark:text-gray-400">{{date}}</span>
					<p>{{description}}</p>
				</div>
			</a>
			{{/posts}}
		</div>
	</div>
</section>