ActionFlow Menu Copy this Tailwind ActionDropdownto Your Project

<center className="relative inline block w full"> <Button ref={buttonRef} size="small" variant="ghost" type="button" onClick={handleOpenChange} className="text sm font semibold darkColor border 2 border transparent cursor pointer px 16 rounded xl bg white addingactionbtn" > + Add Action </Button> {isOpen && ( <div ref={dropdownRef} className={`absolute z [9999] right 40 py 3 border border [#00000026] bg grey 0 rounded [12px] w [220px] ${openUpward ? 'bottom full mb 1' : 'mt 1'}`} style={{left: openUpward ? '150px' : '150px' }} > <div className="cursor pointer last:mb 0 hover:bg [rgba(0,0,0,0.04)] flex flex row justify between items center focus within:outline none pl [20px]"> <button className={`btn focus:shadow none btn small flex w full h 9 justify start capitalize font semibold text base tracking [ 0.21px] hover:bg transparent px 0 ${actionTypes.includes('send_email') ? 'pointer events none select none opacity 50' : ''}`} disabled={actionTypes.includes('send_email')} onClick={() => !actionTypes.includes('send_email') && manageAction('send_email', 10)}> <span className="flex items center gap [15px]"> <FontAwesomeIcon icon={faShare} className="w [19px] h [16px]" /> Send Email Reply </span> </button> </div> <div className="cursor pointer last:mb 0 hover:bg [rgba(0,0,0,0.04)] flex flex row justify between items center focus within:outline none pl [20px]"> <button className={`btn focus:shadow none btn small flex w full h 9 justify start capitalize font semibold text base tracking [ 0.21px] hover:bg transparent px 0 ${actionTypes.includes('send_sms') ? 'pointer events none select none opacity 50' : ''}`} disabled={actionTypes.includes('send_sms')} onClick={() => !actionTypes.includes('send_sms') && manageAction('send_sms', 6)}> <span className="flex items center gap [15px]"> <FontAwesomeIcon icon={faShare} className="w [19px] h [16px]" /> Send SMS Reply </span> </button> </div> <div className="cursor pointer last:mb 0 hover:bg [rgba(0,0,0,0.04)] flex flex row justify between items center focus within:outline none pl [20px]"> <button className={`btn focus:shadow none btn small flex w full h 9 justify start capitalize font semibold text base tracking [ 0.21px] hover:bg transparent px 0 ${actionTypes.includes('apply_tags') ? 'pointer events none select none opacity 50' : ''}`} disabled={actionTypes.includes('apply_tags')} onClick={() => !actionTypes.includes('apply_tags') && manageAction('apply_tags', 5)}> <span className="flex items center gap [15px]"> <FontAwesomeIcon icon={faTags} className="w [19px] h [16px]" /> Apply Tags </span> </button> </div> <div className="cursor pointer last:mb 0 hover:bg [rgba(0,0,0,0.04)] flex flex row justify between items center focus within:outline none pl [20px]"> <button className={`btn focus:shadow none btn small flex w full h 9 justify start capitalize font semibold text base tracking [ 0.21px] hover:bg transparent px 0 ${actionTypes.includes('remove_tags') ? 'pointer events none select none opacity 50' : ''}`} disabled={actionTypes.includes('remove_tags')} onClick={() => !actionTypes.includes('remove_tags') && manageAction('remove_tags', 9)}> <span className="flex items center gap [15px]"> <FontAwesomeIcon icon={faTags} className="w [19px] h [16px]" /> Remove Tags </span> </button> </div> <div className="cursor pointer last:mb 0 hover:bg [rgba(0,0,0,0.04)] flex flex row justify between items center focus within:outline none pl [20px]"> <button className={`btn focus:shadow none btn small flex w full h 9 justify start capitalize font semibold text base tracking [ 0.21px] hover:bg transparent px 0 ${actionTypes.includes('assign_user') ? 'pointer events none select none opacity 50' : ''}`} disabled={actionTypes.includes('assign_user')} onClick={() => !actionTypes.includes('assign_user') && manageAction('assign_user', 7)}> <span className="flex items center gap [15px]"> <FontAwesomeIcon icon={faUserCheck} className="w [19px] h [16px]" /> Assign User </span> </button> </div> <div className="cursor pointer last:mb 0 hover:bg [rgba(0,0,0,0.04)] flex flex row justify between items center focus within:outline none pl [20px]"> <button className={`btn focus:shadow none btn small flex w full h 9 justify start capitalize font semibold text base tracking [ 0.21px] hover:bg transparent px 0 ${actionTypes.includes('move_to_pipeline') ? 'pointer events none select none opacity 50' : ''}`} disabled={actionTypes.includes('move_to_pipeline')} onClick={() => !actionTypes.includes('move_to_pipeline') && manageAction('move_to_pipeline', 4)}> <span className="flex items center gap [15px]"> <FontAwesomeIcon icon={faLayerGroup} className="w [19px] h [16px]" /> Move To Pipeline/Stage </span> </button> </div> <div className="cursor pointer last:mb 0 hover:bg [rgba(0,0,0,0.04)] flex flex row justify between items center focus within:outline none pl [20px]"> <button className={`btn focus:shadow none btn small flex w full h 9 justify start capitalize font semibold text base tracking [ 0.21px] hover:bg transparent px 0 ${actionTypes.includes('send_webhook') ? 'pointer events none select none opacity 50' : ''}`} disabled={actionTypes.includes('send_webhook')} onClick={() => !actionTypes.includes('send_webhook') && manageAction('send_webhook', 11)}> <span className="flex items center gap [15px]"> <FontAwesomeIcon icon={faCogs} className="w [19px] h [16px]" /> Send Webhook </span> </button> </div> </div> )} </center>