Dragula (Drag & Drop)

	Copy

	
    <div class="preview-content grid grid-cols-1 xl:grid-cols-3 gap-6" id="simple-dragula" data-plugin="dragula">
        <div class="p-5 bg-primary rounded-lg text-white">
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <p>Someone famous in <em>Source Title</em></p> 
        </div>
        <div class="p-5 bg-success rounded-lg text-white">
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <p>Someone famous in <em>Source Title</em></p> 
        </div>
        <div class="p-5 bg-warning rounded-lg text-white">
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <p>Someone famous in <em>Source Title</em></p> 
        </div>
        <div class="p-5 bg-danger rounded-lg text-white">
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <p>Someone famous in <em>Source Title</em></p> 
        </div>
        <div class="p-5 bg-info rounded-lg text-white">
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <p>Someone famous in <em>Source Title</em></p> 
        </div>
        <div class="p-5 bg-dark rounded-lg text-white">
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <p>Someone famous in <em>Source Title</em></p> 
        </div>
    </div>
    

Part 1

Luoise K. Bond

Founder & CEO

Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

James M. Short

Software Engineer

Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

Susan J. Sander

Web Designer

Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

Part 2

Dennis N. Cloutier

Web Developer

Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

Gabriel J. Snyder

Business Analyst

Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

Louie C. Mason

Human Resources

Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

	Copy

	
    <div class="preview-content grid grid-cols-1 xl:grid-cols-2 gap-6" data-plugin="dragula" data-containers='["company-list-left", "company-list-right"]'>
        <div class="col-span-1 p-5 bg-light rounded-lg">
            <h5>Part 1</h5>
            <div class="flex flex-col gap-4 mt-8" id="company-list-left">
                <div class="flex sm:flex-row flex-col items-start gap-3 p-4 border border-border-color rounded-lg bg-white">
                    <img src="assets/img/avatar/avatar-01.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                    <div>
                        <h5 class="text-[16px] mb-1">Luoise K. Bond</h5>
                        <p class="text-xs mb-3">Founder & CEO</p>
                        <em class="text-xs">Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</em>
                    </div>
                </div>
                <div class="flex sm:flex-row flex-col items-start gap-3 p-4 border border-border-color rounded-lg bg-white">
                    <img src="assets/img/avatar/avatar-02.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                    <div>
                        <h5 class="text-[16px] mb-1">James M. Short</h5>
                        <p class="text-xs mb-3">Software Engineer</p>
                        <em class="text-xs">Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</em>
                    </div>
                </div>
                <div class="flex sm:flex-row flex-col items-start gap-3 p-4 border border-border-color rounded-lg bg-white">
                    <img src="assets/img/avatar/avatar-03.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                    <div>
                        <h5 class="text-[16px] mb-1">Susan J. Sander</h5>
                        <p class="text-xs mb-3">Web Designer</p>
                        <em class="text-xs">Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</em>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-span-1 p-5 bg-light rounded-lg">
            <h5>Part 2</h5>
            <div class="flex flex-col gap-4 mt-8" id="company-list-right">
                <div class="flex sm:flex-row flex-col items-start gap-3 p-4 border border-border-color rounded-lg bg-white">
                    <img src="assets/img/avatar/avatar-04.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                    <div>
                        <h5 class="text-[16px] mb-1">Dennis N. Cloutier</h5>
                        <p class="text-xs mb-3">Web Developer</p>
                        <em class="text-xs">Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</em>
                    </div>
                </div>
                <div class="flex sm:flex-row flex-col items-start gap-3 p-4 border border-border-color rounded-lg bg-white">
                    <img src="assets/img/avatar/avatar-05.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                    <div>
                        <h5 class="text-[16px] mb-1">Gabriel J. Snyder</h5>
                        <p class="text-xs mb-3">Business Analyst</p>
                        <em class="text-xs">Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</em>
                    </div>
                </div>
                <div class="flex sm:flex-row flex-col items-start gap-3 p-4 border border-border-color rounded-lg bg-white">
                    <img src="assets/img/avatar/avatar-06.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                    <div>
                        <h5 class="text-[16px] mb-1">Louie C. Mason</h5>
                        <p class="text-xs mb-3">Human Resources</p>
                        <em class="text-xs">Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</em>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

Part 1

Luoise K. Bond

Founder & CEO

Dennis N. Cloutier

Software Engineer

Susan J. Sander

Web Designer

Part 2

Gabriel J. Snyder

Web Developer

James M. Short

Business Analyst

Louie C. Mason

Human Resources

	Copy

	
    <div class="preview-content grid grid-cols-1 xl:grid-cols-2 gap-6" data-plugin="dragula" data-containers='["handle-dragula-left", "handle-dragula-right"]' data-handleClass="dragula-handle">
        <div class="col-span-1 p-5 bg-light rounded-lg">
            <h5>Part 1</h5>
            <div class="flex flex-col gap-4 mt-8" id="handle-dragula-left">
                <div class="flex items-center justify-between p-4 border border-border-color rounded-lg bg-white">
                    <div class="flex items-center gap-2">
                        <img src="assets/img/avatar/avatar-07.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                        <div>
                            <h5 class="text-[16px]">Luoise K. Bond</h5>
                            <p class="text-xs">Founder & CEO</p>
                        </div>
                    </div>
                    <i class="icon-move cursor-move dragula-handle"></i>
                </div>
                <div class="flex items-center justify-between p-4 border border-border-color rounded-lg bg-white">
                    <div class="flex items-center gap-2">
                        <img src="assets/img/avatar/avatar-08.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                        <div>
                            <h5 class="text-[16px]">Dennis N. Cloutier</h5>
                            <p class="text-xs">Software Engineer</p>
                        </div>
                    </div>
                    <i class="icon-move cursor-move dragula-handle"></i>
                </div>
                <div class="flex items-center justify-between p-4 border border-border-color rounded-lg bg-white">
                    <div class="flex items-center gap-2">
                        <img src="assets/img/avatar/avatar-09.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                        <div>
                            <h5 class="text-[16px]">Susan J. Sander</h5>
                            <p class="text-xs">Web Designer</p>
                        </div>
                    </div>
                    <i class="icon-move cursor-move dragula-handle"></i>
                </div> 
            </div>
        </div>
        <div class="col-span-1 p-5 bg-light rounded-lg">
            <h5>Part 2</h5>
            <div class="flex flex-col gap-4 mt-8" id="handle-dragula-right">
                <div class="flex items-center justify-between p-4 border border-border-color rounded-lg bg-white">
                    <div class="flex items-center gap-2">
                        <img src="assets/img/avatar/avatar-10.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                        <div>
                            <h5 class="text-[16px]">Gabriel J. Snyder</h5>
                            <p class="text-xs">Web Developer</p>
                        </div>
                    </div>
                    <i class="icon-move cursor-move dragula-handle"></i>
                </div>
                <div class="flex items-center justify-between p-4 border border-border-color rounded-lg bg-white">
                    <div class="flex items-center gap-2">
                        <img src="assets/img/avatar/avatar-12.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                        <div>
                            <h5 class="text-[16px]">James M. Short</h5>
                            <p class="text-xs">Business Analyst</p>
                        </div>
                    </div>
                    <i class="icon-move cursor-move dragula-handle"></i>
                </div>
                <div class="flex items-center justify-between p-4 border border-border-color rounded-lg bg-white">
                    <div class="flex items-center gap-2">
                        <img src="assets/img/avatar/avatar-13.jpg" class="size-10 rounded-full border border-border-color" alt="user-image">
                        <div>
                            <h5 class="text-[16px]">Louie C. Mason</h5>
                            <p class="text-xs">Human Resources</p>
                        </div>
                    </div>
                    <i class="icon-move cursor-move dragula-handle"></i>
                </div> 
            </div>
        </div>
    </div>