blog entries

<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>