JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    


   
    
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/lightgallery-bundle.css" rel="stylesheet"  type="text/css"> 
   
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    
    
    <link href="https://www.lightgalleryjs.com/css/lg-transitions.css" rel="stylesheet" type="text/css">
    
    
    
  

</head>
 
 
 <div class="presentation-btn" id="dynamic-gallery-presentation">
                  <div class="presentation-btn-name presentation-gallery">
                     ДИВИТИСЯ ПРЕЗЕНТАЦІЮ
                  </div>
               </div>
               
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lightgallery.umd.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/zoom/lg-zoom.umd.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/thumbnail/lg-thumbnail.umd.min.js"></script>

CSS

.presentation-btn {
   display: flex;
   justify-content: center;
   border: 1px solid #1ea022;
   min-width: 292.67px;
   padding: 10px;
   cursor: pointer;
   transition: border 0.3s ease 0s;
}
.presentation-btn:hover {
   border: 1px solid #ff7200;
}
.presentation-btn-name {
   color: #fcfcf7;
   transition: color 0.3s ease 0s;
}
.presentation-btn:hover .presentation-btn-name {
   color: #ff7200;
}
.presentation-btn.presentation-btn-gallery {
   position: absolute;
   top: 0;
   left: 0;
   width: 350px;
}

JavaScript

const $dynamicGallery = document.getElementById("dynamic-gallery-presentation");
  if ($dynamicGallery) {
    const dynamicGallery = window.lightGallery($dynamicGallery, {
      thumbnail: true,
      dynamic: true,
      mode: 'lg-slide-skew-only-rev',
      plugins: [lgZoom, lgThumbnail],
      dynamicEl: [
        {
          src:
            "https://zoryadnepra.com/img/demo/dark-version/semi-smoked/0002.jpg",
          thumb:
            "https://zoryadnepra.com/img/demo/dark-version/featured/01.jpg",
          subHtml: `<a href="#" class="presentation-download">
          <div class="presentation-btn presentation-btn-gallery">
             <div class="presentation-btn-name ">
                ЗАВАНТАЖИТИ ПРЕЗЕНТАЦІЮ &dArr;
             </div>
          </div>
       </a>`
        },
        {
          src:
            "https://zoryadnepra.com/img/demo/dark-version/semi-smoked/0003.jpg",
          thumb:
            "https://zoryadnepra.com/img/demo/dark-version/featured/02.jpg",
          subHtml: `<a href="#" class="presentation-download">
          <div class="presentation-btn presentation-btn-gallery">
             <div class="presentation-btn-name ">
                ЗАВАНТАЖИТИ ПРЕЗЕНТАЦІЮ &dArr;
             </div>
          </div>
       </a>`
        },
        {
          src:
            "https://zoryadnepra.com/img/demo/dark-version/semi-smoked/5806.jpg",
          thumb:
            "https://zoryadnepra.com/img/demo/dark-version/featured/04.jpg",
          subHtml: `<a href=#" class="presentation-download">
          <div class="presentation-btn presentation-btn-gallery">
             <div class="presentation-btn-name ">
                ЗАВАНТАЖИТИ ПРЕЗЕНТАЦІЮ &dArr;
             </div>
          </div>
       </a>`
        },
        {
          src:
            "https://zoryadnepra.com/img/demo/dark-version/semi-smoked/3971.jpg",
          thumb:
            "https://zoryadnepra.com/img/demo/dark-version/featured/03.jpg",
          subHtml: `<a...