CODEWITHSUNDEEP
reactjstailwind-cssmargin
ilaesm
ilaesm

Reputation: 9

Margin-bottom won't move div in tailwind

I'm trying to move the email component up the screen but margin-bottom won't do anything. Is there another tailwind utility I have to use?

import React from 'react'

function Email() {
  return (
    <div className='flex justify-center w-full items-center mb-8'>
<div className="mb-3 mx-auto xl:w-1/4 md:w-1/2 top-1/4 ">
            <input type="text" placeholder="[email protected]" className="p-3 rounded-l-md sm:w-2/3 font-['DM_Sans']" />
            <button type="button" className="p-3 bg-[#00ADC2] text-white font-semibold rounded-r-md sm:w-1/3  font-['DM_Sans']">Notify Me</button>
        </div>
        </div>
  )
}

export default Email

How it looks on the page

Upvotes: 0

Views: 1218

Answers (1)

Johnny Missile
Johnny Missile

Reputation: 292

Margin bottom is going to push the content below down.

If you are looking to move the content up you can try negative margin on top.

With tailwind it's something like -mt-8.

Upvotes: 1

Related Questions