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 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 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 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 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 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 icon-move cursor-move dragula-handle"></i>
			</div> 
		</div>
	</div>
</div>