An interactive menu that opens to the bottom of a button using Nextjs and Tailwind CSS.
For this component to properly work, you will need to install popper.js into your project. Please run the following:
npm i -E @popperjs/core@2.4.4
Dropdown Example
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-900 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
white Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-blueGray-500 active:bg-blueGray-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
blueGray Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-blueGray-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
red Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-red-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-orange-500 active:bg-orange-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
orange Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-orange-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-amber-500 active:bg-amber-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
amber Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-amber-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-emerald-500 active:bg-emerald-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
emerald Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-emerald-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-teal-500 active:bg-teal-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
teal Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-teal-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-lightBlue-500 active:bg-lightBlue-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
lightBlue Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-lightBlue-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-indigo-500 active:bg-indigo-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
indigo Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-indigo-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-purple-500 active:bg-purple-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
purple Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-purple-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "bottom-start"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
pink Dropdown
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-pink-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
Dropup Example
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-900 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
white Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-blueGray-500 active:bg-blueGray-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
blueGray Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-blueGray-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
red Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-red-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-orange-500 active:bg-orange-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
orange Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-orange-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-amber-500 active:bg-amber-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
amber Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-amber-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-emerald-500 active:bg-emerald-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
emerald Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-emerald-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-teal-500 active:bg-teal-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
teal Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-teal-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-lightBlue-500 active:bg-lightBlue-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
lightBlue Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-lightBlue-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-indigo-500 active:bg-indigo-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
indigo Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-indigo-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-purple-500 active:bg-purple-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
purple Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-purple-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
import React from "react";
import { createPopper } from '@popperjs/core';
const Dropdown = () => {
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
const btnDropdownRef = React.createRef();
const popoverDropdownRef = React.createRef();
const openDropdownPopover = () => {
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
placement: "top"
});
setDropdownPopoverShow(true);
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
};
return (
<>
<div className="flex flex-wrap">
<div className="w-full sm:w-6/12 md:w-4/12 px-4">
<div className="relative inline-flex align-middle w-full">
<button
className="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 ease-linear transition-all duration-150"
type="button"
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
pink Dropup
</button>
<div
ref={popoverDropdownRef}
className={
(dropdownPopoverShow ? "block " : "hidden ") +
"bg-pink-500 text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
}
>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Another action
</a>
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Something else here
</a>
<div className="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25" />
<a
href="#pablo"
className="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white"
onClick={e => e.preventDefault()}
>
Seprated link
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default Dropdown;
Props
Please check the official PopperJS Documentation.
You can also check the Official PopperJS Github Repository.