0

I have used react bootstrap to display a popup when page is loaded. I want to change the position of the box with tailwind css and the position is changing but there's a white box present on the screen. can you please help me how to remove it? enter image description here

import React,{useState} from 'react';
import {Modal} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const Popup = () => {
    const [show, setShow] = useState(true);
    const handleClose = () => setShow(false);
  
  return (
    <>
      

      <Modal show={show} onHide={handleClose}>
        <Modal.Body className="bg-black absolute top-44"><input className="pl-2 py-1" placeholder="search..."/></Modal.Body>
      </Modal>
    </>
  );
}

export default Popup
SaiNaveen
  • 51
  • 1
  • 6

1 Answers1

0

It will show because you are applying absolute position with top:44px you can use margin then it will show inside of white box if you don't required white box then you have to remove default background color from .modal-content class.

Vishal_VE
  • 1,852
  • 1
  • 6
  • 9