---
sidebar_position: 2
---

# Horizontal Style

![Cards](/img/horizontal-style.png)

```jsx title="Frontend/sections/BlogSections/HorizontalStyle.tsx"
<>
      {/* <!-- Card Blog --> */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        {/* <!-- Grid --> */}
        <div className="grid lg:grid-cols-2 gap-6">
          {/* <!-- Card --> */}
          <a className="group sm:flex rounded-xl" href="#">
            <div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
              <img
                className="w-full absolute top-0 start-0 object-cover"
                src="https://images.unsplash.com/photo-1664574654529-b60630f33fdb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
                alt="Image Description"
              />
            </div>

            <div className="grow">
              <div className="p-4 flex flex-col h-full sm:p-6">
                <div className="mb-3">
                  <p className="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-base-100 text-secondary-content">
                    Business
                  </p>
                </div>
                <h3 className="text-lg sm:text-2xl font-semibold text-secondary-content group-hover:text-primary">
                  FastPocket becomes an official Instagram Marketing Partner
                </h3>
                <p className="mt-2 text-secondary-content">
                  Great news we're eager to share.
                </p>

                <div className="mt-5 sm:mt-auto">
                  {/* <!-- Avatar --> */}
                  <div className="flex items-center">
                    <div className="flex-shrink-0">
                      <img
                        className="w-[46px] rounded-full"
                        src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                        alt="Image Description"
                      />
                    </div>
                    <div className="ms-2.5 sm:ms-4">
                      <h4 className="font-semibold text-secondary-content">
                        Aaron Larsson
                      </h4>
                      <p className="text-xs text-base-300">Feb 15, 2021</p>
                    </div>
                  </div>
                  {/* <!-- End Avatar --> */}
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a className="group sm:flex rounded-xl" href="#">
            <div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
              <img
                className="w-full absolute top-0 start-0 object-cover"
                src="https://images.unsplash.com/photo-1669824774762-65ddf29bee56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
                alt="Image Description"
              />
            </div>
            <div className="grow">
              <div className="p-4 flex flex-col h-full sm:p-6">
                <div className="mb-3">
                  <p className="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-base-100 text-secondary-content">
                    Announcements
                  </p>
                </div>
                <h3 className="text-lg sm:text-2xl font-semibold text-secondary-content group-hover:text-primary">
                  Announcing a free plan for small teams
                </h3>
                <p className="mt-2 text-secondary-content">
                  At Wake, our mission has always been focused on bringing
                  openness.
                </p>

                <div className="mt-5 sm:mt-auto">
                  {/* <!-- Avatar --> */}
                  <div className="flex items-center">
                    <div className="flex-shrink-0">
                      <img
                        className="w-[46px] rounded-full"
                        src="https://images.unsplash.com/photo-1669720229052-89cda125fc3f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                        alt="Image Description"
                      />
                    </div>
                    <div className="ms-2.5 sm:ms-4">
                      <h4 className="font-semibold text-secondary-content">
                        Hanna Wolfe
                      </h4>
                      <p className="text-xs text-base-300">Feb 4, 2021</p>
                    </div>
                  </div>
                  {/* <!-- End Avatar --> */}
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}
        </div>
        {/* <!-- End Grid --> */}
      </div>
      {/* <!-- End Card Blog --> */}
    </>
```