1
<div class="max-w-7xl mx-auto">
<div class="max-w-xl mx-auto text-center lg:text-balance">
<p class="text-sm font-bold uppercase text-blue-600">Tagline</p>
<h2
class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-zinc-900 lg:text-balance"
>
Insights and perspectives
</h2>
<p class="text-base mt-4 font-medium text-zinc-500">
Exploring topics, tips, and trends in the world of communication and
privacy
</p>
<form
class="flex flex-col w-full mx-auto mt-12 sm:flex-row 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 bg-white border border-transparent rounded-lg appearance-none text-blue-700 duration-300 ring-1 ring-zinc-200 placeholder-zinc-400 focus:border-zinc-300 focus:bg-transparent focus:outline-none focus:ring-blue-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
/>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-10 px-6 py-3 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full sm:w-auto"
type="submit"
>
Subscribe
</button>
</form>
<p class="text-sm mt-4 font-medium text-zinc-500">
When you sign up, you accept our
<a
class="text-sm font-medium text-blue-500 gap-2 hover:text-zinc-900"
href="#_"
>
Terms of service
</a>
and
<a
class="text-sm font-medium text-blue-500 gap-2 hover:text-zinc-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="mt-32 space-y-16">
<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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
Responsive web design best practices
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Mon Mar 25">Mon Mar 25</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
Javascript frameworks: a comparison
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Wed Apr 10">Wed Apr 10</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
The future of CSS: new features to watch
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Fri May 05">Fri May 05</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
User experience design principles
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Tue Jun 15">Tue Jun 15</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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>
<div class="max-w-7xl mx-auto">
<div class="max-w-xl mx-auto text-center lg:text-balance">
<p class="text-sm font-bold uppercase text-blue-600">Tagline</p>
<h2
class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-zinc-900 lg:text-balance"
>
Insights and perspectives
</h2>
<p class="text-base mt-4 font-medium text-zinc-500">
Exploring topics, tips, and trends in the world of communication and
privacy
</p>
<form
class="flex flex-col w-full mx-auto mt-12 sm:flex-row 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 bg-white border border-transparent rounded-lg appearance-none text-blue-700 duration-300 ring-1 ring-zinc-200 placeholder-zinc-400 focus:border-zinc-300 focus:bg-transparent focus:outline-none focus:ring-blue-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
/>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-10 px-6 py-3 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full sm:w-auto"
type="submit"
>
Subscribe
</button>
</form>
<p class="text-sm mt-4 font-medium text-zinc-500">
When you sign up, you accept our
<a
class="text-sm font-medium text-blue-500 gap-2 hover:text-zinc-900"
href="#_"
>
Terms of service
</a>
and
<a
class="text-sm font-medium text-blue-500 gap-2 hover:text-zinc-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="mt-32 space-y-16">
<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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
Responsive web design best practices
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Mon Mar 25">Mon Mar 25</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
Javascript frameworks: a comparison
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Wed Apr 10">Wed Apr 10</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
The future of CSS: new features to watch
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Fri May 05">Fri May 05</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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-zinc-50 duration-300"
></div>
<svg
viewBox="0 0 9 9"
class="hidden absolute right-full mr-6 top-2 text-blue-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-lg md:text-xl font-medium text-zinc-900 group-hover:text-blue-600 duration-200"
>
User experience design principles
</h3>
<p class="text-base mt-4 font-medium text-zinc-500">
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 font-medium uppercase text-zinc-500 whitespace-nowrap"
>
<time datetime="Tue Jun 15">Tue Jun 15</time>
</p>
</div>
</div>
<div class="mt-8">
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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-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>