<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">
<span
class="font-mono text-xs font-medium tracking-tight text-blue-600 uppercase"
>Tagline</span
>
<h1
class="text-4xl mt-4 font-semibold tracking-tight lg:text-7xl text-gray-900 sm:text-balance"
>
From Our Blog
</h1>
<p class="mt-6 text-base font-medium text-gray-500">
Dive into our latest articles and stay updated with fresh perspectives
and expert advice.
</p>
<form class="w-full mt-8 sm:flex sm:max-w-md">
<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-blue-700 duration-300 bg-white border border-transparent rounded-lg shadow appearance-none ring-1 ring-gray-200 placeholder-gray-400 focus:border-gray-300 focus:bg-transparent focus:outline-none focus:ring-blue-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
/>
<div class="mt-2 sm:ml-2 sm:mt-0 sm:flex-shrink-0">
<button
type="submit"
class="flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium text-white transition-all duration-200 rounded-lg shadow sm:w-auto bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-800 shadow-blue-600/50 focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none lg:w-auto"
>
Subscribe
</button>
</div>
</form>
<p class="text-xs mt-3 text-gray-500">
When you sign up, you accept our
<a class="text-blue-600 hover:text-gray-900" href="#_"
>Terms of Service</a
>
and
<a class="text-blue-600 hover:text-gray-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-gray-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">
<h3
class="tracking-tight text-2xl font-medium text-gray-900 pt-8 lg:pt-0"
>
Responsive web design best practices
</h3>
<div class="mt-2 mb-4 text-base lg:text-lg text-gray-500">
<p>
Learn the best practices for creating responsive web designs
that provide a seamless user experience across all devices.
</p>
</div>
<dl
class="absolute left-0 top-0 tracking-tight text-lg font-medium text-gray-900 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<dt class="sr-only">Mon Mar 25</dt>
<dd class="whitespace-nowrap">
<time datetime="Mon Mar 25">Mon Mar 25</time>
</dd>
</dl>
</div>
<a
class="flex items-center text-sm text-blue-700 font-medium"
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="text-blue-500 hover:text-gray-900 text-sm font-medium duration-300 flex items-center gap-2 relative"
>
Read more
<span class="sr-only"
>, Responsive web design best practices</span
>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-chevron-right relative mt-px overflow-visible ml-2.5 size-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</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-gray-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">
<h3
class="tracking-tight text-2xl font-medium text-gray-900 pt-8 lg:pt-0"
>
Javascript frameworks: a comparison
</h3>
<div class="mt-2 mb-4 text-base lg:text-lg text-gray-500">
<p>
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>
<dl
class="absolute left-0 top-0 tracking-tight text-lg font-medium text-gray-900 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<dt class="sr-only">Wed Apr 10</dt>
<dd class="whitespace-nowrap">
<time datetime="Wed Apr 10">Wed Apr 10</time>
</dd>
</dl>
</div>
<a
class="flex items-center text-sm text-blue-700 font-medium"
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="text-blue-500 hover:text-gray-900 text-sm font-medium duration-300 flex items-center gap-2 relative"
>
Read more
<span class="sr-only">, Javascript frameworks: a comparison</span>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-chevron-right relative mt-px overflow-visible ml-2.5 size-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</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-gray-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">
<h3
class="tracking-tight text-2xl font-medium text-gray-900 pt-8 lg:pt-0"
>
The future of CSS: new features to watch
</h3>
<div class="mt-2 mb-4 text-base lg:text-lg text-gray-500">
<p>
Explore the latest features and updates in CSS that are shaping
the future of web design and development.
</p>
</div>
<dl
class="absolute left-0 top-0 tracking-tight text-lg font-medium text-gray-900 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<dt class="sr-only">Fri May 05</dt>
<dd class="whitespace-nowrap">
<time datetime="Fri May 05">Fri May 05</time>
</dd>
</dl>
</div>
<a
class="flex items-center text-sm text-blue-700 font-medium"
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="text-blue-500 hover:text-gray-900 text-sm font-medium duration-300 flex items-center gap-2 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"
class="icon icon-tabler icon-tabler-chevron-right relative mt-px overflow-visible ml-2.5 size-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</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-gray-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">
<h3
class="tracking-tight text-2xl font-medium text-gray-900 pt-8 lg:pt-0"
>
User experience design principles
</h3>
<div class="mt-2 mb-4 text-base lg:text-lg text-gray-500">
<p>
Understand the key principles of user experience design and how
to apply them to create intuitive and user-friendly websites.
</p>
</div>
<dl
class="absolute left-0 top-0 tracking-tight text-lg font-medium text-gray-900 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
<dt class="sr-only">Tue Jun 15</dt>
<dd class="whitespace-nowrap">
<time datetime="Tue Jun 15">Tue Jun 15</time>
</dd>
</dl>
</div>
<a
class="flex items-center text-sm text-blue-700 font-medium"
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="text-blue-500 hover:text-gray-900 text-sm font-medium duration-300 flex items-center gap-2 relative"
>
Read more
<span class="sr-only">, User experience design principles</span>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-chevron-right relative mt-px overflow-visible ml-2.5 size-4"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</article>
</div>
</div>
</div>
</section>
