Skip to main content

CSS Collection

Auto Wrap Layout​

function AutoWrap() {
    return <>
        <div className={"flex justify-between w-1/3 flex-wrap border"}>
            <div className={"min-h-[24px] flex-1 border max-w-[100%]"}>
                <div contentEditable={true} className={"w-auto"}></div>
            </div>
            <div className={"flex ml-auto"}>
                <div>@</div>
                <div>#</div>
            </div>
        </div>
    </>;
}
@
#
.draw-container {
    position: relative;

    &:hover {
        .draw-body {
            transform: translateY(1rem);
            visibility: visible;
            opacity: 1;
        }
    }

    .draw-body {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: all 0.3s ease-in-out;

        position: absolute;
        left: 0;
        z-index: 999;
        width: 100%;


        background: linear-gradient(to bottom, theme('colors.card.DEFAULT'), theme('colors.white'));
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        max-height: 20rem;
        overflow-y: scroll;

        padding: 20px;
        list-style-type: disc;

    }
}