Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
## SenangStart CSS Code
```html
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<div space="m-b:big tw-lg:m-b:big-3x" visual="text:center">
<span layout="inline" space="p-y:tiny p-x:small-3x m-b:medium" visual="rounded:round text-size:small font:tw-semibold text:blue-600 bg:blue-100 uppercase">Our History</span>
<h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Tracing Our Path: A Journey of Growth</h2>
<p space="max-w:[3xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">From a humble beginning to where we stand today, every step has been a testament to our dedication and vision.</p>
</div>
<div layout="relative">
<!-- Timeline Line for larger screens -->
<div layout="hidden tw-lg:block absolute top:none bottom:none" space="w:regular" visual="bg:neutral-200" class="left-1/2 transform -translate-x-1/2"></div>
<!-- Timeline Item 1 -->
<div layout="flex col tw-lg:row items:center" space="m-b:big tw-lg:m-b:big-3x">
<div layout="order:2 tw-lg:order:1" space="tw-lg:w:[1/2] tw-lg:p-r:large">
<div layout="relative" space="p:medium-3x tw-lg:m-l:auto tw-lg:max-w:[md] m-t:medium-3x tw-lg:m-t:none" visual="bg:white rounded:medium shadow:big" class="z-10">
<span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-600">2018 - The Spark</span>
<h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Our Humble Beginnings</h3>
<p visual="text:neutral-600">It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points.</p>
</div>
</div>
<div layout="order:1 tw-lg:order:2" space="tw-lg:w:[1/2] tw-lg:p-l:large">
<img src="https://placehold.co/600x400/e2e8f0/334155?text=Early+Days" alt="Our Beginnings" space="w:[100%] tw-lg:max-w:[md] m-x:auto" visual="rounded:medium shadow:big">
</div>
</div>
<!-- Timeline Item 2 -->
<div layout="flex col tw-lg:row-reverse items:center" space="m-b:big tw-lg:m-b:big-3x">
<div layout="order:2 tw-lg:order:1" space="tw-lg:w:[1/2] tw-lg:p-l:large">
<div layout="relative" space="p:medium-3x tw-lg:m-r:auto tw-lg:max-w:[md] m-t:medium-3x tw-lg:m-t:none" visual="bg:white rounded:medium shadow:big" class="z-10">
<span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-600">2020 - First Milestone</span>
<h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Launching Our Flagship Product</h3>
<p visual="text:neutral-600">After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth.</p>
</div>
</div>
<div layout="order:1 tw-lg:order:2" space="tw-lg:w:[1/2] tw-lg:p-r:large">
<img src="https://placehold.co/600x400/dbeafe/1e40af?text=Product+Launch" alt="Product Launch" space="w:[100%] tw-lg:max-w:[md] m-x:auto" visual="rounded:medium shadow:big">
</div>
</div>
<!-- Timeline Item 3 -->
<div layout="flex col tw-lg:row items:center" space="m-b:big tw-lg:m-b:big-3x">
<div layout="order:2 tw-lg:order:1" space="tw-lg:w:[1/2] tw-lg:p-r:large">
<div layout="relative" space="p:medium-3x tw-lg:m-l:auto tw-lg:max-w:[md] m-t:medium-3x tw-lg:m-t:none" visual="bg:white rounded:medium shadow:big" class="z-10">
<span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-600">2022 - Expanding Horizons</span>
<h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Global Reach & Team Growth</h3>
<p visual="text:neutral-600">Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities.</p>
</div>
</div>
<div layout="order:1 tw-lg:order:2" space="tw-lg:w:[1/2] tw-lg:p-l:large">
<img src="https://placehold.co/600x400/ccfbf1/115e59?text=Expansion" alt="Global Expansion" space="w:[100%] tw-lg:max-w:[md] m-x:auto" visual="rounded:medium shadow:big">
</div>
</div>
<!-- Timeline Item 4 (Future) -->
<div layout="flex col tw-lg:row-reverse items:center">
<div layout="order:2 tw-lg:order:1" space="tw-lg:w:[1/2] tw-lg:p-l:large">
<div layout="relative" space="p:medium-3x tw-lg:m-r:auto tw-lg:max-w:[md] m-t:medium-3x tw-lg:m-t:none" visual="bg:blue-600 text:white rounded:medium shadow:big" class="z-10">
<span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-200">Today & Beyond - The Vision</span>
<h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Innovating for Tomorrow</h3>
<p visual="text:blue-100">We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow.</p>
</div>
</div>
<div layout="order:1 tw-lg:order:2" space="tw-lg:w:[1/2] tw-lg:p-r:large">
<img src="https://placehold.co/600x400/e0f2fe/075985?text=Future+Vision" alt="Future Vision" space="w:[100%] tw-lg:max-w:[md] m-x:auto" visual="rounded:medium shadow:big">
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="text-center mb-12 lg:mb-16">
<span class="inline-block py-1 px-3 rounded-full text-sm font-semibold text-blue-600 bg-blue-100 uppercase mb-4">Our History</span>
<h2 class="text-3xl lg:text-5xl font-bold mb-4">Tracing Our Path: A Journey of Growth</h2>
<p class="text-lg lg:text-xl text-neutral-700 max-w-3xl mx-auto">From a humble beginning to where we stand today, every step has been a testament to our dedication and vision.</p>
</div>
<div class="relative">
<!-- Timeline Line for larger screens -->
<div class="hidden lg:block absolute top-0 bottom-0 left-1/2 w-0.5 bg-neutral-200 transform -translate-x-1/2"></div>
<!-- Timeline Item 1 -->
<div class="mb-12 lg:mb-16 flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 lg:pr-8 order-2 lg:order-1">
<div class="bg-white p-6 rounded-xl shadow-lg lg:ml-auto lg:max-w-md relative z-10 mt-6 lg:mt-0">
<span class="block text-sm font-semibold text-blue-600 mb-1">2018 - The Spark</span>
<h3 class="text-2xl font-bold mb-3">Our Humble Beginnings</h3>
<p class="text-neutral-600">It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points.</p>
</div>
</div>
<div class="lg:w-1/2 lg:pl-8 order-1 lg:order-2">
<img src="https://placehold.co/600x400/e2e8f0/334155?text=Early+Days" alt="Our Beginnings" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto">
</div>
</div>
<!-- Timeline Item 2 -->
<div class="mb-12 lg:mb-16 flex flex-col lg:flex-row-reverse items-center">
<div class="lg:w-1/2 lg:pl-8 order-2 lg:order-1">
<div class="bg-white p-6 rounded-xl shadow-lg lg:mr-auto lg:max-w-md relative z-10 mt-6 lg:mt-0">
<span class="block text-sm font-semibold text-blue-600 mb-1">2020 - First Milestone</span>
<h3 class="text-2xl font-bold mb-3">Launching Our Flagship Product</h3>
<p class="text-neutral-600">After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth.</p>
</div>
</div>
<div class="lg:w-1/2 lg:pr-8 order-1 lg:order-2">
<img src="https://placehold.co/600x400/dbeafe/1e40af?text=Product+Launch" alt="Product Launch" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto">
</div>
</div>
<!-- Timeline Item 3 -->
<div class="mb-12 lg:mb-16 flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 lg:pr-8 order-2 lg:order-1">
<div class="bg-white p-6 rounded-xl shadow-lg lg:ml-auto lg:max-w-md relative z-10 mt-6 lg:mt-0">
<span class="block text-sm font-semibold text-blue-600 mb-1">2022 - Expanding Horizons</span>
<h3 class="text-2xl font-bold mb-3">Global Reach & Team Growth</h3>
<p class="text-neutral-600">Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities.</p>
</div>
</div>
<div class="lg:w-1/2 lg:pl-8 order-1 lg:order-2">
<img src="https://placehold.co/600x400/ccfbf1/115e59?text=Expansion" alt="Global Expansion" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto">
</div>
</div>
<!-- Timeline Item 4 (Future) -->
<div class="flex flex-col lg:flex-row-reverse items-center">
<div class="lg:w-1/2 lg:pl-8 order-2 lg:order-1">
<div class="bg-blue-600 text-white p-6 rounded-xl shadow-lg lg:mr-auto lg:max-w-md relative z-10 mt-6 lg:mt-0">
<span class="block text-sm font-semibold text-blue-200 mb-1">Today & Beyond - The Vision</span>
<h3 class="text-2xl font-bold mb-3">Innovating for Tomorrow</h3>
<p class="text-blue-100">We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow.</p>
</div>
</div>
<div class="lg:w-1/2 lg:pr-8 order-1 lg:order-2">
<img src="https://placehold.co/600x400/e0f2fe/075985?text=Future+Vision" alt="Future Vision" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto">
</div>
</div>
</div>
</section>
```