Marketing blocks to quickly build your sites with pre-built sections, headers, and more. Fully responsive and customizable with Chai Builder. Made with Tailwind CSS & Alpine JS.
Work in progress. More to come.
<section
$name="Blog grid 3 Columns"
class="px-4 py-16 mx-auto container lg:py-20"
data-page-section>
<div class="grid gap-5 lg:grid-cols-3 sm:max-w-sm sm:mx-auto lg:max-w-full">
<div class="overflow-hidden transition-shadow duration-300 rounded">
<a aria-label="Article" href="/public">
<img
alt="Article Image"
class="object-cover w-full h-64 rounded"
data-aos="fade-up"
src="https://images.pexels.com/photos/932638/pexels-photo-932638.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</a>
<div class="py-5">
<p
class="mb-2 text-xs font-semibold text-gray-600 uppercase dark:text-gray-400">
15 Jan 2024
</p>
<a
aria-label="Read more"
class="inline-block mb-3 text-black transition-colors duration-200 hover:text-secondary-700 dark:text-gray-100 dark:hover:text-secondary-500"
href="/public">
<h3 class="text-2xl font-bold leading-5">Journey into the Unknown</h3>
</a>
<p class="mb-4 text-gray-700 dark:text-gray-300">
Discover the mysteries of the world, from hidden gems to ancient
wonders.
</p>
<div class="flex space-x-4">
<a
aria-label="Likes"
class="flex items-start text-gray-800 transition-colors duration-200 hover:text-secondary-700 dark:text-gray-300 dark:hover:text-secondary-500 group"
href="/public">
<div class="mr-2">
<svg
class="w-5 h-5 text-gray-600 transition-colors duration-200 group-hover:text-deep-purple-accent-700"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg">
<polyline
fill="none"
points="6 23 1 23 1 12 6 12"
stroke-miterlimit="10"></polyline>
<path
d="M6,12,9,1H9a3,3,0,0,1,3,3v6h7.5a3,3,0,0,1,2.965,3.456l-1.077,7A3,3,0,0,1,18.426,23H6Z"
fill="none"
stroke="currentColor"
stroke-miterlimit="10"></path>
</svg>
</div>
<p class="font-semibold">12.3K</p>
</a>
</div>
</div>
</div>
<div class="overflow-hidden transition-shadow duration-300 rounded">
<a aria-label="Article" href="/public">
<img
alt="Article Image"
class="object-cover w-full h-64 rounded"
data-aos="fade-up"
src="https://images.pexels.com/photos/1576937/pexels-photo-1576937.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
</a>
<div class="py-5">
<p
class="mb-2 text-xs font-semibold text-gray-600 uppercase dark:text-gray-400">
23 Feb 2024
</p>
<a
aria-label="Read more"
class="inline-block mb-3 text-black transition-colors duration-200 hover:text-secondary-700 dark:text-gray-100 dark:hover:text-secondary-500"
href="/public">
<h3 class="text-2xl font-bold leading-5">
Master the Art of Adventure
</h3>
</a>
<p class="mb-4 text-gray-700 dark:text-gray-300">
Explore new horizons with tips and tricks for mastering the art of
adventure and travel.
</p>
<div class="flex space-x-4">
<a
aria-label="Likes"
class="flex items-start text-gray-800 transition-colors duration-200 hover:text-secondary-700 dark:text-gray-300 dark:hover:text-secondary-500 group"
href="/public">
<div class="mr-2">
<svg
class="w-5 h-5 text-gray-600 transition-colors duration-200 group-hover:text-deep-purple-accent-700"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg">
<polyline
fill="none"
points="6 23 1 23 1 12 6 12"
stroke-miterlimit="10"></polyline>
<path
d="M6,12,9,1H9a3,3,0,0,1,3,3v6h7.5a3,3,0,0,1,2.965,3.456l-1.077,7A3,3,0,0,1,18.426,23H6Z"
fill="none"
stroke="currentColor"
stroke-miterlimit="10"></path>
</svg>
</div>
<p class="font-semibold">9.8K</p>
</a>
</div>
</div>
</div>
<div class="overflow-hidden transition-shadow duration-300 rounded">
<a aria-label="Article" href="/public">
<img
alt="Article Image"
class="object-cover w-full h-64 rounded"
data-aos="fade-up"
src="https://images.pexels.com/photos/2123755/pexels-photo-2123755.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</a>
<div class="py-5">
<p
class="mb-2 text-xs font-semibold text-gray-600 uppercase dark:text-gray-400">
12 Mar 2024
</p>
<a
aria-label="Read more"
class="inline-block mb-3 text-black transition-colors duration-200 hover:text-secondary-700 dark:text-gray-100 dark:hover:text-secondary-500"
href="/public">
<h3 class="text-2xl font-bold leading-5">
Unlock the Secrets of the Wild
</h3>
</a>
<p class="mb-4 text-gray-700 dark:text-gray-300">
Venture into the wild and uncover the secrets of nature's most
fascinating landscapes.
</p>
<div class="flex space-x-4">
<a
aria-label="Comments"
class="flex items-start text-gray-800 transition-colors duration-200 hover:text-secondary-700 dark:text-gray-300 dark:hover:text-secondary-500 group"
href="/public">
<div class="mr-2">
<svg
class="w-5 h-5 text-gray-600 transition-colors duration-200 group-hover:text-deep-purple-accent-700"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg">
<polyline
fill="none"
points="6 23 1 23 1 12 6 12"
stroke-miterlimit="10"></polyline>
<path
d="M6,12,9,1H9a3,3,0,0,1,3,3v6h7.5a3,3,0,0,1,2.965,3.456l-1.077,7A3,3,0,0,1,18.426,23H6Z"
fill="none"
stroke="currentColor"
stroke-miterlimit="10"></path>
</svg>
</div>
<p class="font-semibold">92</p>
</a>
</div>
</div>
</div>
</div>
</section>
<section $name="Blog 2 Cards Layout" data-page-section>
<div class="container px-6 py-10 mx-auto">
<div class="text-center">
<h1
class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
Latest Industry News
</h1>
<p class="max-w-lg mx-auto mt-4 text-gray-500">
Stay informed with the latest updates and insights from the world of
technology and business.
</p>
</div>
<div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-2">
<div>
<img
alt="Man working on laptop"
class="relative z-10 object-cover w-full rounded-md h-96"
src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" />
<div
class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-gray-900">
<a
class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl"
href="#">
Adapting to Remote Work: Strategies for Success
</a>
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
Explore how companies are adapting to remote work and the strategies
that are making it successful.
</p>
<p class="mt-3 text-sm text-blue-500">10 August 2023</p>
</div>
</div>
<div>
<img
alt="Woman discussing project"
class="relative z-10 object-cover w-full rounded-md h-96"
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" />
<div
class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-gray-900">
<a
class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl"
href="#">
The Importance of Diversity in Tech
</a>
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
Learn about the benefits of diversity in tech and how it drives
innovation and success.
</p>
<p class="mt-3 text-sm text-blue-500">8 August 2023</p>
</div>
</div>
</div>
</div>
</section>
<section $name="Blog Single Post" data-page-section>
<div class="container px-6 py-10 mx-auto">
<h1
class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
Latest Insights
</h1>
<div class="mt-8 lg:-mx-6 lg:flex lg:items-center">
<img
alt="Developer working on code"
class="object-cover w-full lg:mx-6 lg:w-1/2 rounded-xl h-72 lg:h-96"
src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?q=80&w=3271&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<div class="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6">
<p class="text-sm text-primary-500 uppercase">Technology</p>
<a
class="block mt-4 text-2xl font-semibold text-gray-800 hover:underline dark:text-white"
href="#">
Embracing the Future of Remote Development
</a>
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
As remote work becomes the norm, discover how developers are adapting
to new tools and workflows to stay productive.
</p>
<a
class="inline-block mt-2 text-primary-500 underline hover:text-primary-400"
href="#"
>Read more
</a>
<div class="flex items-center mt-6">
<img
alt="Portrait of the author"
class="object-cover object-center w-10 h-10 rounded-full"
src="https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=764&q=80" />
<div class="mx-4">
<h1 class="text-sm text-gray-700 dark:text-gray-200">Jordan Lee</h1>
<p class="text-sm text-gray-500 dark:text-gray-400">
Software Engineer
</p>
</div>
</div>
</div>
</div>
</div>
</section>