what have you already tried.

I could only think of stupid solutions so technically nothing

I wanna do it properly

But im not sure how to

well most of this css is wrong

why are you absoluting the inner div

and not just adding padding to the top of the outer div

Copilot ¯_(ツ)_/¯

part of being able to use ai is to know what NOT to accept

This is gonna be my first project

Im aware but im new to everything in nextjs so i dont have much of a choice

& Tailwind

you shouldnt use AI until you can do all of it on your own. AI in code is only good for reducing redundant typing

you are hurting yourself by using it

Understood

read up on padding, flex, and flex direction

those will solve your above issue

Ok

Why does margin bottom not move it up and just add more space to the bottom without moving it

I want it to be a bit above the div

what do you mean you want it to be a bit above the div

Uhh so one moment

Before

What i want

to do that you will need to absolute the image.

Aw alright

Thank you

and it has a lot of downsides that are normally not worth it

thats why that style has been seen less and less

Hm

Maybe i could do a little work around if i have another invisible div wrapped around that div

Which has a little bit more height

Im not sure if that would work but it wont hurt to try

not really. you still want overlapping

so you will need absolute and zorder

making it moot

would be easier to have an svg background that was half 1 color and half the other color

I guess ill just move the whole icon to the top

And have the online & member count also not be right between the border of that div

Sad

That could also make sense I guess

Yup

Component:

const ServerCard = () => {
  return (
    <div className="relative w-80 h-52 rounded-lg shadow-xl"> {/* Background */}
      <div className="h-20 px-4 rounded-t-lg flex flex-row justify-between items-center bg-[url('/assets/images/thumb-prev.png')] bg-cover bg-center">
        <div className="rounded-2xl bg-gray-800 w-16 shadow-xl">
          <Image
            src="/assets/icons/icon.png"
            alt="Server icon"
            width={128}
            height={128}  
            className="rounded-2xl"
          />
        </div>

        <div className="rounded-2xl bg-gray-700 px-2 mt-8 text-xs text-gray-300 font-semibold leading-6 shadow-xl">
            <span className="text-green-500">●</span> 5 online | ● 5 total
        </div>
      </div>
      <div className="w-full h-20 rounded-b-lg bg-gradient-to-b from-gray-900 to-gray-800"> {/* Info */}
        <div className="flex flex-row justify-start h-full px-4">
          <div className="flex flex-col justify-center">
            <h1 className="text-white font-bold text-l">Project Bronze Forever</h1>
            <p className="text-gray-400 text-sm">Our main Discord Server</p>
          </div>
        </div>
      </div>
    </div>
  )
}

Okay now i just want to make the background image a little more transparent, how would i do that?

I have tried googling but i cant set opacity since the children will inherit it

Unless theres a way to make them not

bump

use google bud. this is basic css stuff.

^

This is a nextjs server

not an intro to css server

Helping me solve this last issue would let this thread vanish as quickly as it appeared

and forcing you to learn basic css instead of spoon feeding the answer will prevent 100 more threads.

I'm not asking you to spoonfeed me answers as you haven't before nudging me into the right direction would suffice

literally has nothing to do with what he is asking for.

Thats already solved but thank you

And uhm im not sure if that wouldve worked anyway

you need to use pseudo elements.

before and after.

Thank you very much