Recommendation on the tailwind pattern to style this footer gracefully

Here is what I'm working with atm and its honestly just not looking very good.

<div className="align-center mx-auto flex flex-col justify-center border border-button bg-white py-8 pt-12">
      <div className="flex basis-11/12 justify-evenly">
        <div className="mt-4 flex basis-1/3 flex-col justify-end">
          <div className="flex  justify-end">
            <Image
              src="/sanmarcosdivelogo.png"
              alt="Next.js Logo"
              width={104}
              height={110}
              priority
            />
            <Image
              className="ml-4"
              src="/diveshop-text.png"
              alt="Next.js Logo"
              width={230}
              height={68}
              priority
            />
          </div>
          <div className="flex basis-1/3 justify-end">
            <p className="break-normal text-base text-navy-blue basis-1/2">
              Dive Shop San Marcos, 1911 Old Ranch Road 12, San Marcos TX 78666
            </p>
          </div>
        </div>
        <div className="basis-4/6">
          <div className="mx-16 mt-12 flex justify-center">
            <Link href="#" className="mx-8 font-bold text-blue">
              Home
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue" />
            <Link href="#" className="text-nvy-blue mx-8 font-bold">
              Classes
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue" />
            <Link href="#" className="mx-8 font-bold text-navy-blue">
              Retails Parts
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue" />
            <Link href="#" className="mx-8 font-bold text-navy-blue">
              Scuba Trips & Events
            </Link>
          </div>
        </div>
      </div>
    </div>

<div className="align-center mx-auto flex flex-col justify-center border border-button bg-white py-8 pt-12">
      <div className="flex basis-11/12 justify-evenly">
        <div className="mt-4 flex basis-1/3 flex-col justify-end">
          <div className="flex  justify-end">
            <Image
              src="/sanmarcosdivelogo.png"
              alt="Next.js Logo"
              width={104}
              height={110}
              priority
            />
            <Image
              className="ml-4"
              src="/diveshop-text.png"
              alt="Next.js Logo"
              width={230}
              height={68}
              priority
            />
          </div>
          <div className="flex basis-1/3 justify-end">
            <p className="break-normal text-base text-navy-blue basis-1/2">
              Dive Shop San Marcos, 1911 Old Ranch Road 12, San Marcos TX 78666
            </p>
          </div>
        </div>
        <div className="basis-4/6">
          <div className="mx-16 mt-12 flex justify-center">
            <Link href="#" className="mx-8 font-bold text-blue">
              Home
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue" />
            <Link href="#" className="text-nvy-blue mx-8 font-bold">
              Classes
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue" />
            <Link href="#" className="mx-8 font-bold text-navy-blue">
              Retails Parts
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue" />
            <Link href="#" className="mx-8 font-bold text-navy-blue">
              Scuba Trips & Events
            </Link>
          </div>
        </div>
      </div>
    </div>

I think the primary goals for this 'grid' is that I need the left sides of the RIGHT portion of the grid to be aligned, but I also need the menu in the LEFT side, vertically aligned in the center of the logo on the RIGHT side. Any recommendations would be greatly appreciated ty guys

5 Replies

MagerX•15mo ago

obvious I dont need all of the styling done for me. I really just need help with getting the left side and the right side alignment correct.

Vincent Udén•15mo ago

I'd use a grid with some different self-alignment

MagerX•15mo ago

Ahhh, the concept of self alignment is probably where I'm dropping the ball on my mental model I'm about to crash but will try this first thing when I wake up! tysm yeah that grid looks perfect because then on mobile, I can just stack the left side on top of the right side and center everything and call it a day

Vincent Udén•15mo ago

Yup! Exactly my thought too

Vincent Udén•15mo ago

And as always, mozillas page on box alignment is pretty darn good https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

Box alignment in grid layout - CSS: Cascading Style Sheets | MDN

CSS Grid Layout implements the specification Box Alignment Level 3 which is the same standard flexbox uses for aligning items in its flex container. This specification details how alignment should work in all the different layout methods. Layout methods will conform to the specification where possible and implement individual behavior based on t...

Gaming

Programming

Recommendation on the tailwind pattern to style this footer gracefully