GLassmorp - Tailwind Dashboard Glassmorpism

Carousel

Create sliding images or content sections that offer an engaging way to showcase multiple pieces of information in a single space.

Banner slider

                  
<!-- carousel image -->
<div class="mklausjenrhtm w-full">
  <div class="relative px-0.5 pt-0.5">
    <!-- carousel -->
    <div id="sliders" class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <!-- Slide 1 -->
          <li class="splide__slide">
            <img src="../src/img/work/work1.jpg" alt="Blog info" class="w-full">
          </li>
          <!-- Slide 2 -->
          <li class="splide__slide">
            <img src="../src/img/work/work2.jpg" alt="Blog info" class="w-full">
          </li>
          <!-- Slide 3 -->
          <li class="splide__slide">
            <img src="../src/img/work/work3.jpg" alt="Blog info" class="w-full">
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Product slider

Big Burger

(134)

$ 35.00
Fried Rice

(34)

$ 41.00
Italiano Spaghetti

(344)

$ 58.00
French fries

(94)

$ 28.00
Chicken Ball

(194)

$ 28.00
Japanese Ramen

(64)

$ 28.00

                  
<!-- Splide carousel -->
<div id="food-slider" class="splide" aria-label="Food Products Slider">
  <div class="splide__track">
    <ul class="splide__list">
      <!-- Card 1 -->
      <li class="splide__slide">
        <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-xl mklausjenrhtm w-full">
          <div class="relative">
            <img src="../src/img/food/food1.jpg" alt="Big Burger" class="w-full object-cover">
            <div class="py-4 dkslaoeyhnmj">
              <p class="text-lg font-semibold mb-1">Big Burger</p>
              <div class="flex layhetgsjdcb gap-1 mb-2">
                <!-- Rating stars -->
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-half text-yellow-500"></i>
                <span>(134)</span>
              </div>
              <div class="flex vlaoethsnkma layhetgsjdcb">
                <p class="text-lg font-bold text-green-600 dark:text-green-200">$ 35.00</p>
              </div>
            </div>
          </div>
        </div>
      </li>

      <!-- Card -->
      <li class="splide__slide">
        <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-xl mklausjenrhtm w-full">
          <div class="relative">
            <img src="../src/img/food/food2.jpg" alt="Fried Rice" class="w-full object-cover">
            <div class="py-4 dkslaoeyhnmj">
              <p class="text-lg font-semibold mb-1">Fried Rice</p>
              <div class="flex layhetgsjdcb gap-1 mb-2">
                <!-- Rating stars -->
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-half text-yellow-500"></i>
                <span>(34)</span>
              </div>
              <div class="flex vlaoethsnkma layhetgsjdcb">
                <p class="text-lg font-bold text-green-600 dark:text-green-200">$ 41.00</p>
              </div>
            </div>
          </div>
        </div>
      </li>

      <!-- Card -->
      <li class="splide__slide">
        <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-xl mklausjenrhtm w-full">
          <div class="relative">
            <img src="../src/img/food/food3.jpg" alt="Italiano Spaghetti" class="w-full object-cover">
            <div class="py-4 dkslaoeyhnmj">
              <p class="text-lg font-semibold mb-1">Italiano Spaghetti</p>
              <div class="flex layhetgsjdcb gap-1 mb-2">
                <!-- Rating stars -->
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-half text-yellow-500"></i>
                <span>(344)</span>
              </div>
              <div class="flex vlaoethsnkma layhetgsjdcb">
                <p class="text-lg font-bold text-green-600 dark:text-green-200">$ 58.00</p>
              </div>
            </div>
          </div>
        </div>
      </li>

      <!-- Card -->
      <li class="splide__slide">
        <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-xl mklausjenrhtm w-full">
          <div class="relative">
            <img src="../src/img/food/food4.jpg" alt="French fries" class="w-full object-cover">
            <div class="py-4 dkslaoeyhnmj">
              <p class="text-lg font-semibold mb-1">French fries</p>
              <div class="flex layhetgsjdcb gap-1 mb-2">
                <!-- Rating stars -->
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-half text-yellow-500"></i>
                <span>(94)</span>
              </div>
              <div class="flex vlaoethsnkma layhetgsjdcb">
                <p class="text-lg font-bold text-green-600 dark:text-green-200">$ 28.00</p>
              </div>
            </div>
          </div>
        </div>
      </li>

      <!-- Card -->
      <li class="splide__slide">
        <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-xl mklausjenrhtm w-full">
          <div class="relative">
            <img src="../src/img/food/food5.jpg" alt="Chicken Ball" class="w-full object-cover">
            <div class="py-4 dkslaoeyhnmj">
              <p class="text-lg font-semibold mb-1">Chicken Ball</p>
              <div class="flex layhetgsjdcb gap-1 mb-2">
                <!-- Rating stars -->
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-half text-yellow-500"></i>
                <span>(194)</span>
              </div>
              <div class="flex vlaoethsnkma layhetgsjdcb">
                <p class="text-lg font-bold text-green-600 dark:text-green-200">$ 28.00</p>
              </div>
            </div>
          </div>
        </div>
      </li>

      <!-- Card -->
      <li class="splide__slide">
        <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-xl mklausjenrhtm w-full">
          <div class="relative">
            <img src="../src/img/food/food6.jpg" alt="Japanese Ramen" class="w-full object-cover">
            <div class="py-4 dkslaoeyhnmj">
              <p class="text-lg font-semibold mb-1">Japanese Ramen</p>
              <div class="flex layhetgsjdcb gap-1 mb-2">
                <!-- Rating stars -->
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-fill text-yellow-500"></i>
                <i class="bi bi-star-half text-yellow-500"></i>
                <span>(64)</span>
              </div>
              <div class="flex vlaoethsnkma layhetgsjdcb">
                <p class="text-lg font-bold text-green-600 dark:text-green-200">$ 28.00</p>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>