<label class="inline-flex items-center cursor-pointer">
    <input type="checkbox" class="sr-only peer" checked>
    <span class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none rounded-full peer dark:bg-gray-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></span>
    <span class="line-height-1 font-medium ms-3 peer-checked:text-primary-600 text-md text-gray-600 dark:text-gray-300">Switch Inactive</span>
</label>

<label class="inline-flex items-center cursor-pointer">
    <input type="checkbox" class="sr-only peer" checked>
    <span class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none rounded-full peer dark:bg-gray-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></span>
    <span class="line-height-1 font-medium ms-3 peer-checked:text-purple-600 text-md text-gray-600 dark:text-gray-300">Switch Inactive</span>
</label>

<label class="inline-flex items-center cursor-pointer">
    <input type="checkbox" class="sr-only peer" checked>
    <span class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none rounded-full peer dark:bg-gray-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-success-600"></span>
    <span class="line-height-1 font-medium ms-3 peer-checked:text-success-600 text-md text-gray-600 dark:text-gray-300">Switch Inactive</span>
</label>

<label class="inline-flex items-center cursor-pointer">
    <input type="checkbox" class="sr-only peer" checked>
    <span class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none rounded-full peer dark:bg-gray-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-warning-600"></span>
    <span class="line-height-1 font-medium ms-3 peer-checked:text-warning-600 text-md text-gray-600 dark:text-gray-300">Switch Inactive</span>
</label>
                

<div class="before:absolute before:w-full before:h-full before:bg-gradient-to-t from-neutral-900/75 before:z-[1] z-1 relative bottom-0 start-0 h-full">
    <img src="assets/images/carousel/carousel-img2.png" alt="" class="w-full h-full object-fit-cover">
    <div class="absolute start-1/2 -translate-x-1/2 bottom-0 pb-6 z-[2] text-center w-full max-w-[440px]">
        <h5 class="card-title text-white text-lg mb-1.5">Carousel Slide One</h5>
        <p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
    </div>
</div>
<div class="before:absolute before:w-full before:h-full before:bg-gradient-to-t from-neutral-900/75 before:z-[1] z-1 relative bottom-0 start-0 h-full">
    <img src="assets/images/carousel/carousel-img4.png" alt="" class="w-full h-full object-fit-cover">
    <div class="absolute start-1/2 -translate-x-1/2 bottom-0 pb-6 z-[2] text-center w-full max-w-[440px]">
        <h5 class="card-title text-white text-lg mb-1.5">Carousel Slide Two</h5>
        <p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
    </div>
</div>
<div class="before:absolute before:w-full before:h-full before:bg-gradient-to-t from-neutral-900/75 before:z-[1] z-1 relative bottom-0 start-0 h-full">
    <img src="assets/images/carousel/carousel-img3.png" alt="" class="w-full h-full object-fit-cover">
    <div class="absolute start-1/2 -translate-x-1/2 bottom-0 pb-6 z-[2] text-center w-full max-w-[440px]">
        <h5 class="card-title text-white text-lg mb-1.5">Carousel Slide Three</h5>
        <p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
    </div>
</div>
                

  // Arrow Carousel
  $('.arrow-carousel').slick({
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1, 
      arrows: true, 
      dots: false,
      infinite: true,
      autoplay: false,
      autoplaySpeed: 2000,
      speed: 600,
      prevArrow: '',
      nextArrow: '',
  });
                

<div class="card-body p-6 relative">
    <img src="assets/images/videos/video-img1.png" class="w-full h-full object-fit-cover rounded-lg overflow-hidden" alt="">
    <a href="https://www.youtube.com/watch?v=Vr9WoWXkKeE" class="magnific-video shadow-[0px_0px_0px_5px_rgba(255,255,255,0.5)] w-[56px] h-[56px] bg-white rounded-full flex justify-center items-center absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-1">
        <iconify-icon icon="ion:play" class="text-primary-600 text-2xl"></iconify-icon>
    </a>
</div>
                

  // ========================= magnific Popup Icon Js Start =====================
  $('.magnific-video').magnificPopup({
    type:'iframe'
  });
  // ========================= magnific Popup Icon Js End =====================
                

  <div class="upload-image-wrapper flex items-center gap-3 flex-wrap">
    <div class="uploaded-imgs-container flex gap-3 flex-wrap"></div>
    <label class="upload-file-multiple h-[120px] w-[120px] border input-form-light rounded-lg overflow-hidden border-dashed bg-neutral-50 dark:bg-neutral-600 hover:bg-neutral-200 flex items-center flex-col justify-center gap-1" for="upload-file-multiple">
      <iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
      <span class="font-semibold text-secondary-light">Upload</span>
      <input id="upload-file-multiple" type="file" hidden multiple>
    </label>
  </div>
                

  // ================================================ Upload image & show it's name js start  ================================================
  document.getElementById('file-upload-name').addEventListener('change', function(event) {
    var fileInput = event.target;
    var fileList = fileInput.files;
    var ul = document.getElementById('uploaded-img-names');
    
    // Add show-uploaded-img-name class to the ul element if not already added
    ul.classList.add('show-uploaded-img-name');

    // Append each uploaded file name as a list item with Font Awesome and Iconify icons
    for (var i = 0; i < fileList.length; i++) {
        var li = document.createElement('li');
        li.classList.add('uploaded-image-name-list', 'text-primary-600', 'font-semibold', 'flex', 'items-center', 'gap-2');
        
        // Create the Link Iconify icon element
        var iconifyIcon = document.createElement('iconify-icon');
        iconifyIcon.setAttribute('icon', 'ph:link-break-light'); 
        iconifyIcon.classList.add('text-xl', 'text-secondary-light');
        
        // Create the Cross Iconify icon element
        var crossIconifyIcon = document.createElement('iconify-icon');
        crossIconifyIcon.setAttribute('icon', 'radix-icons:cross-2');  
        crossIconifyIcon.classList.add('remove-image','text-xl', 'text-secondary-light', 'text-hover-danger-600');

        // Add event listener to remove the image on click
        crossIconifyIcon.addEventListener('click', (function(liToRemove) {
            return function() {
                ul.removeChild(liToRemove); // Remove the corresponding list item
            };
        })(li)); // Pass the current list item as a parameter to the closure
        
        // Append both icons to the list item
        li.appendChild(iconifyIcon);

        // Append the file name text to the list item
        li.appendChild(document.createTextNode(' ' + fileList[i].name));

        li.appendChild(crossIconifyIcon);

        // Append the list item to the unordered list
        ul.appendChild(li);
    }
});
  // ================================================ Upload image & show it's name js end ================================================