Custom Select - Copy this React, Tailwind Component to your project

import-React,-{-useState-}-from-"react";-const-CustomSelectUI-=-()-=>-{-const-[selectedItems,-setSelectedItems]-=-useState([-{-value:-"Bánh-mì",-label:-"Bánh-mì"-},-{-value:-"Bún-chả",-label:-"Bún-chả"-},-{-value:-"Mì-hoành-thánh",-label:-"Mì-hoành-thánh"-},-{-value:-"Trà-Sữa",-label:-"Trà-Sữa"-},-]);-const-[availableItems,-setAvailableItems]-=-useState([-{-value:-"Ốc-Bươu",-label:-"Ốc-Bươu"-},-{-value:-"Bào-ngư",-label:-"Bào-ngư"-},-{-value:-"Cơm-chay",-label:-"Cơm-chay"-},-]);-const-[isSelectedCollapsed,-setIsSelectedCollapsed]-=-useState(false);-const-handleSelect-=-(item)-=>-{-setSelectedItems([...selectedItems,-item]);-setAvailableItems(availableItems.filter((i)-=>-i.value-!==-item.value));-};-const-handleUnselect-=-(item)-=>-{-setAvailableItems([...availableItems,-item]);-setSelectedItems(selectedItems.filter((i)-=>-i.value-!==-item.value));-};-return-(-<div-style={{-width:-"400px",-margin:-"20px-auto",-fontFamily:-"Arial,-sans-serif"-}}>-{/*-Selected-Items-Section-*/}-<div-style={{-background:-"#e9eef5",-borderRadius:-"8px",-marginBottom:-"12px",-padding:-"8px",-cursor:-"pointer",-}}-onClick={()-=>-setIsSelectedCollapsed(!isSelectedCollapsed)}->-<h4-style={{-margin:-0,-display:-"flex",-justifyContent:-"space-between"-}}>-Đã-chọn-{selectedItems.length}{"-"}-<span>{isSelectedCollapsed-?-"▼"-:-"▲"}</span>-</h4>-</div>-{!isSelectedCollapsed-&&-(-<div-style={{-border:-"1px-solid-#ccc",-borderRadius:-"8px",-padding:-"8px"-}}>-{selectedItems.map((item)-=>-(-<div-key={item.value}-style={{-display:-"flex",-alignItems:-"center",-padding:-"4px-0",-borderBottom:-"1px-solid-#eee",-}}->-<input-type="checkbox"-checked-onChange={()-=>-handleUnselect(item)}-style={{-marginRight:-"8px"-}}-/>-<span>{item.label}</span>-</div>-))}-</div>-)}-{/*-Available-Items-Section-*/}-<div-style={{-background:-"#e9eef5",-borderRadius:-"8px",-marginBottom:-"12px",-padding:-"8px",-}}->-<h4-style={{-margin:-0-}}>Còn-lại-{availableItems.length}</h4>-</div>-<div-style={{-border:-"1px-solid-#ccc",-borderRadius:-"8px",-padding:-"8px"-}}>-{availableItems.map((item)-=>-(-<div-key={item.value}-style={{-display:-"flex",-alignItems:-"center",-padding:-"4px-0",-borderBottom:-"1px-solid-#eee",-}}->-<input-type="checkbox"-onChange={()-=>-handleSelect(item)}-style={{-marginRight:-"8px"-}}-/>-<span>{item.label}</span>-</div>-))}-</div>-</div>-);-};-export-default-CustomSelectUI;