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

A UI framework to create HTML pages with just JavaScript.

<section class="dark:bg-gray-800 dark:text-gray-100">
	<div class="container flex flex-col-reverse mx-auto lg:flex-row">
		<div class="flex flex-col px-6 py-8 space-y-6 rounded-sm sm:p-8 lg:p-12 lg:w-1/2 xl:w-2/5 dark:bg-yellow-400 dark:text-gray-900">
			
            {{#features}}
            <div class="flex space-x-2 sm:space-x-4">
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
				</svg>
				<div class="space-y-2">
					<p class="text-lg font-medium leading-snug">{{title}}</p>
					<p class="leading-snug">{{description}}</p>
				</div>
			</div>
            {{/features}}
		</div>
		<div class="lg:w-1/2 xl:w-3/5 dark:bg-gray-800">
			<div class="flex items-center justify-center p-4 md:p-8 lg:p-12">
				<img src="{{imgUrl}}" alt="{{imgAlt}}" class="rounded-lg shadow-lg dark:bg-gray-500 aspect-video sm:min-h-96">
			</div>
		</div>
	</div>
</section>