<section>
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div class="max-w-xl lg:text-balance mx-auto text-center">
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
>
Insights and perspectives
</h2>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Exploring topics, tips, and trends in the world of communication and
privacy
</p>
<form
class="w-full mt-12 flex flex-col sm:flex-row mx-auto sm:max-w-md gap-2"
>
<label for="email-address" class="sr-only">Email address</label>
<input
id="email-address"
type="email"
name="email-address"
autocomplete="email"
placeholder="Enter your email"
aria-placeholder="Enter your email"
required=""
class="block w-full h-10 px-4 py-2 text-sm text-accent-700 duration-300 bg-white border border-transparent rounded-lg appearance-none ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:bg-transparent focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
/>
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-white bg-accent-600 hover:bg-accent-700 focus:ring-accent-500/50 h-10 px-6 py-3 text-base font-medium rounded-lg w-full sm:w-auto"
type="submit"
>
Subscribe
</button>
</form>
<p class="text-sm leading-normal mt-4 text-base-500 font-medium">
When you sign up, you accept our
<a
class="text-sm leading-normal text-accent-500 font-medium gap-2 hover:text-base-900"
href="#_"
>
Terms of service
</a>
and
<a
class="text-sm leading-normal text-accent-500 font-medium gap-2 hover:text-base-900"
href="#_"
>
Privacy Policy
</a>
</p>
</div>
<div
class="relative sm:pb-12 sm:ml-[calc(2rem+1px)] md:ml-[calc(3.5rem+1px)] lg:ml-[max(calc(14.5rem+1px),calc(100%-80rem))]"
>
<div
class="hidden absolute top-3 bottom-0 right-full mr-7 md:mr-[3.25rem] w-px bg-slate-200 sm:block"
></div>
<div class="space-y-16 mt-32">
<article class="relative group">
<div
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl group-hover:bg-base-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-accent-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
>
<circle
cx="4.5"
cy="4.5"
r="4.5"
stroke-width="2"
stroke="currentColor"
class="fill-white"
></circle>
</svg>
<div class="relative pt-8 lg:pt-0">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium group-hover:text-accent-600 duration-200"
>
Responsive web design best practices
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Learn the best practices for creating responsive web designs that
provide a seamless user experience across all devices.
</p>
<div
class="absolute left-0 top-0 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<span class="sr-only">Mon Mar 25</span>
<p
class="text-sm leading-normal font-medium uppercase text-base-500 whitespace-nowrap"
>
<time datetime="Mon Mar 25">Mon Mar 25</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base leading-normal text-accent-500 font-medium flex items-center gap-2 hover:text-base-900"
href="#_"
>
<span
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl"
></span>
<span class="relative">
Read more
<span class="sr-only"
>, Responsive web design best practices</span
>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-4 relative"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</article>
<article class="relative group">
<div
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl group-hover:bg-base-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-accent-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
>
<circle
cx="4.5"
cy="4.5"
r="4.5"
stroke-width="2"
stroke="currentColor"
class="fill-white"
></circle>
</svg>
<div class="relative pt-8 lg:pt-0">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium group-hover:text-accent-600 duration-200"
>
Javascript frameworks: a comparison
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
An in-depth comparison of the most popular JavaScript frameworks,
including React, Vue, and Angular, to help you choose the right
one for your project.
</p>
<div
class="absolute left-0 top-0 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<span class="sr-only">Wed Apr 10</span>
<p
class="text-sm leading-normal font-medium uppercase text-base-500 whitespace-nowrap"
>
<time datetime="Wed Apr 10">Wed Apr 10</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base leading-normal text-accent-500 font-medium flex items-center gap-2 hover:text-base-900"
href="#_"
>
<span
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl"
></span>
<span class="relative">
Read more
<span class="sr-only"
>, Javascript frameworks: a comparison</span
>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-4 relative"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</article>
<article class="relative group">
<div
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl group-hover:bg-base-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-accent-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
>
<circle
cx="4.5"
cy="4.5"
r="4.5"
stroke-width="2"
stroke="currentColor"
class="fill-white"
></circle>
</svg>
<div class="relative pt-8 lg:pt-0">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium group-hover:text-accent-600 duration-200"
>
The future of CSS: new features to watch
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Explore the latest features and updates in CSS that are shaping
the future of web design and development.
</p>
<div
class="absolute left-0 top-0 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<span class="sr-only">Fri May 05</span>
<p
class="text-sm leading-normal font-medium uppercase text-base-500 whitespace-nowrap"
>
<time datetime="Fri May 05">Fri May 05</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base leading-normal text-accent-500 font-medium flex items-center gap-2 hover:text-base-900"
href="#_"
>
<span
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl"
></span>
<span class="relative">
Read more
<span class="sr-only"
>, The future of CSS: new features to watch</span
>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-4 relative"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</article>
<article class="relative group">
<div
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl group-hover:bg-base-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-accent-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
>
<circle
cx="4.5"
cy="4.5"
r="4.5"
stroke-width="2"
stroke="currentColor"
class="fill-white"
></circle>
</svg>
<div class="relative pt-8 lg:pt-0">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium group-hover:text-accent-600 duration-200"
>
User experience design principles
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Understand the key principles of user experience design and how to
apply them to create intuitive and user-friendly websites.
</p>
<div
class="absolute left-0 top-0 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<span class="sr-only">Tue Jun 15</span>
<p
class="text-sm leading-normal font-medium uppercase text-base-500 whitespace-nowrap"
>
<time datetime="Tue Jun 15">Tue Jun 15</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base leading-normal text-accent-500 font-medium flex items-center gap-2 hover:text-base-900"
href="#_"
>
<span
class="absolute -inset-y-2.5 -inset-x-4 md:-inset-y-4 md:-inset-x-6 sm:rounded-2xl"
></span>
<span class="relative">
Read more
<span class="sr-only">, User experience design principles</span>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-4 relative"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</article>
</div>
</div>
</div>
</section>
