Components

Tailnews is assembled with reusable components. Various components suitable for creating news sites and blogs.

Big Grid

                  
<!-- hero big grid -->
<div class="bg-white py-6">
  <div class="xl:container mx-auto px-3 sm:px-4 xl:px-2">
    <!-- big grid 1 -->
    <div class="flex flex-row flex-wrap">
      <!--Start left cover-->
      <div class="flex-shrink max-w-full w-full lg:w-1/2 pb-1 lg:pb-0 lg:pr-1">
        <div class="relative hover-img max-h-98 overflow-hidden">
          <a href="#">
            <img class="max-w-full w-full mx-auto h-auto" src="src/img/dummy/img1.jpg" alt="Image description">
          </a>
          <div class="absolute px-5 pt-8 pb-5 bottom-0 w-full bg-gradient-cover">
            <a href="#">
              <h2 class="text-3xl font-bold capitalize text-white mb-3">Amazon Shoppers Are Ditching Designer Belts for This Best-Selling</h2>
            </a>
            <p class="text-gray-100 hidden sm:inline-block">This is a wider card with supporting text below as a natural lead-in to additional content. This very helpfull for generate default content..</p>
            <div class="pt-2">
              <div class="text-gray-100"><div class="inline-block h-3 border-l-2 border-red-600 mr-2"></div>Europe</div>
            </div>
          </div>
        </div>
      </div>

      <!--Start box news-->
      <div class="flex-shrink max-w-full w-full lg:w-1/2">
        <div class="box-one flex flex-row flex-wrap">
          <article class="flex-shrink max-w-full w-full sm:w-1/2">
            <div class="relative hover-img max-h-48 overflow-hidden">
              <a href="#">
                <img class="max-w-full w-full mx-auto h-auto" src="src/img/dummy/img2.jpg" alt="Image description">
              </a>
              <div class="absolute px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-cover">
                <a href="#">
                  <h2 class="text-lg font-bold capitalize leading-tight text-white mb-1">News magazines are becoming obsolete, replaced by gadgets</h2>
                </a>
                <div class="pt-1">
                  <div class="text-gray-100"><div class="inline-block h-3 border-l-2 border-red-600 mr-2"></div>Techno</div>
                </div>
              </div>
            </div>
          </article>
          <article class="flex-shrink max-w-full w-full sm:w-1/2">
            <div class="relative hover-img max-h-48 overflow-hidden">
              <a href="#">
                <img class="max-w-full w-full mx-auto h-auto" src="src/img/dummy/img3.jpg" alt="Image description">
              </a>
              <div class="absolute px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-cover">
                <a href="#">
                  <h2 class="text-lg font-bold capitalize leading-tight text-white mb-1">Minimalist designs are starting to be popular with the next generation</h2>
                </a>
                <div class="pt-1">
                  <div class="text-gray-100"><div class="inline-block h-3 border-l-2 border-red-600 mr-2"></div>Architecture</div>
                </div>
              </div>
            </div>
          </article>
          <article class="flex-shrink max-w-full w-full sm:w-1/2">
            <div class="relative hover-img max-h-48 overflow-hidden">
              <a href="#">
                <img class="max-w-full w-full mx-auto h-auto" src="src/img/dummy/img4.jpg" alt="Image description">
              </a>
              <div class="absolute px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-cover">
                <a href="#">
                  <h2 class="text-lg font-bold capitalize leading-tight text-white mb-1">Tips for decorating the interior of the living room</h2>
                </a>
                <div class="pt-1">
                  <div class="text-gray-100"><div class="inline-block h-3 border-l-2 border-red-600 mr-2"></div>Interior</div>
                </div>
              </div>
            </div>
          </article>
          <article class="flex-shrink max-w-full w-full sm:w-1/2">
            <div class="relative hover-img max-h-48 overflow-hidden">
              <a href="#">
                <img class="max-w-full w-full mx-auto h-auto" src="src/img/dummy/img5.jpg" alt="Image description">
              </a>
              <div class="absolute px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-cover">
                <a href="#">
                  <h2 class="text-lg font-bold capitalize leading-tight text-white mb-1">Online taxi users are increasing drastically ahead of the new year</h2>
                </a>
                <div class="pt-1">
                  <div class="text-gray-100"><div class="inline-block h-3 border-l-2 border-red-600 mr-2"></div>Lifestyle</div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</div>
                  
                

Buttons

                  
<button class="inline-bock items-center py-3 px-5 leading-5 text-gray-100 bg-black hover:text-white hover:bg-gray-900 hover:ring-0 focus:outline-none focus:ring-0" type="submit">Primary</button>

<button class="inline-bock items-center py-3 px-5 leading-5 text-gray-700 bg-gray-100 hover:text-black hover:bg-gray-50 hover:ring-0 focus:outline-none focus:ring-0" type="submit">Secondary</button>
                  
                

Card

alt title

5 Tips to Save Money Booking Your Next Hotel Room

Europe
alt title

5 Tips to Save Money Booking Your Next Hotel Room

Europe
                  
<div class="flex flex-row flex-wrap -mx-3">
  <div class="flex-shrink max-w-full w-full sm:w-1/2 px-3 pb-3 pt-3 sm:pt-0 border-b-2 sm:border-b-0 border-dotted border-gray-100">
    <div class="flex flex-row sm:block hover-img">
      <a href="">
        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img6.jpg" alt="alt title">
      </a>
      <div class="py-0 sm:py-3 pl-3 sm:pl-0">
        <h3 class="text-lg font-bold leading-tight mb-2">
          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
        </h3>
        <p class="hidden md:block text-gray-600 leading-tight mb-1">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
      </div>
    </div>
  </div>
  <div class="flex-shrink max-w-full w-full sm:w-1/2 px-3 pb-3 pt-3 sm:pt-0 border-b-2 sm:border-b-0 border-dotted border-gray-100">
    <div class="flex flex-row sm:block hover-img">
      <a href="">
        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img7.jpg" alt="alt title">
      </a>
      <div class="py-0 sm:py-3 pl-3 sm:pl-0">
        <h3 class="text-lg font-bold leading-tight mb-2">
          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
        </h3>
        <p class="hidden md:block text-gray-600 leading-tight mb-1">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
      </div>
    </div>
  </div>
</div>
                  
                

Carousel

                  
<!-- slider news -->
<div class="relative bg-gray-50" style="background-image: url('src/img/bg.jpg');background-size: cover;background-position: center center;background-attachment: fixed">
  <div class="bg-black bg-opacity-70">
    <div class="xl:container mx-auto px-3 sm:px-4 xl:px-2">
      <div class="flex flex-row flex-wrap">
        <div class="flex-shrink max-w-full w-full py-12 overflow-hidden">
          <div class="w-full py-3">
            <h2 class="text-white text-2xl font-bold text-shadow-black">
              <span class="inline-block h-5 border-l-3 border-red-600 mr-2"></span>American
            </h2>
          </div>
          <div id="post-carousel" class="splide">
            <div class="splide__track">
              <ul class="splide__list">
                <li class="splide__slide">
                  <div class="w-full pb-3">
                    <div class="hover-img bg-white">
                      <a href="">
                        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img14.jpg" alt="alt title">
                      </a>
                      <div class="py-3 px-6">
                        <h3 class="text-lg font-bold leading-tight mb-2">
                          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
                        </h3>
                        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="splide__slide">
                  <div class="w-full pb-3">
                    <div class="hover-img bg-white">
                      <a href="">
                        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img15.jpg" alt="alt title">
                      </a>
                      <div class="py-3 px-6">
                        <h3 class="text-lg font-bold leading-tight mb-2">
                          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
                        </h3>
                        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="splide__slide">
                  <div class="w-full pb-3">
                    <div class="hover-img bg-white">
                      <a href="">
                        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img16.jpg" alt="alt title">
                      </a>
                      <div class="py-3 px-6">
                        <h3 class="text-lg font-bold leading-tight mb-2">
                          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
                        </h3>
                        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="splide__slide">
                  <div class="w-full pb-3">
                    <div class="hover-img bg-white">
                      <a href="">
                        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img17.jpg" alt="alt title">
                      </a>
                      <div class="py-3 px-6">
                        <h3 class="text-lg font-bold leading-tight mb-2">
                          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
                        </h3>
                        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="splide__slide">
                  <div class="w-full pb-3">
                    <div class="hover-img bg-white">
                      <a href="">
                        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img18.jpg" alt="alt title">
                      </a>
                      <div class="py-3 px-6">
                        <h3 class="text-lg font-bold leading-tight mb-2">
                          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
                        </h3>
                        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="splide__slide">
                  <div class="w-full pb-3">
                    <div class="hover-img bg-white">
                      <a href="">
                        <img class="max-w-full w-full mx-auto" src="src/img/dummy/img1.jpg" alt="alt title">
                      </a>
                      <div class="py-3 px-6">
                        <h3 class="text-lg font-bold leading-tight mb-2">
                          <a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
                        </h3>
                        <a class="text-gray-500" href="#"><span class="inline-block h-3 border-l-2 border-red-600 mr-2"></span>Europe</a>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
                  
                

Forms

                  
<form class="flex flex-wrap flex-row -mx-4">
  <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
    <label for="inputfirst4" class="inline-block mb-2">Input</label>
    <input type="text" class="w-full leading-5 relative py-3 px-5 text-gray-800 bg-white border border-gray-100 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputfirst4" required>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
    <label for="inputlast4" class="inline-block mb-2">Password</label>
    <input type="password" class="w-full leading-5 relative py-3 px-5 text-gray-800 bg-white border border-gray-100 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputlast4" required>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
    <label for="inpuemail4" class="inline-block mb-2">Email</label>
    <input type="email" class="w-full leading-5 relative py-3 px-5 text-gray-800 bg-white border border-gray-100 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inpuemail4" required>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
    <label for="inputurgent" class="inline-block mb-2">Select</label>
    <select id="inputurgent" class="inline-block w-full leading-5 relative py-3 pl-3 pr-8 text-gray-800 bg-white border border-gray-100 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 select-caret appearance-none dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" required>
      <option>Low...</option>
      <option>Medium...</option>
      <option>Hight...</option>
    </select>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full mb-6">
    <label for="exampleTextarea1" class="inline-block mb-2">Textarea</label>
    <textarea class="w-full leading-5 relative py-3 px-5 text-gray-800 bg-white border border-gray-100 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleTextarea1" rows="3"></textarea>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full mb-6">
    <label class="flex items-center">
      <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-blue-500 dark:bg-gray-700 border border-gray-100 dark:border-gray-700 focus:outline-none" required>
      <span class="text-gray-700 ml-4">Checkbox</span>
    </label>
  </div>
  <div class="flex-shrink max-w-full px-4 w-full">
    <button class="flex items-center py-3 px-5 leading-5 text-gray-100 bg-black hover:text-white hover:bg-gray-900 hover:ring-0 focus:outline-none focus:ring-0" type="submit">
      Send messages
    </button>
  </div>
</form>
                  
                

Gallery

                  
<!-- Portfolio Content -->
<div class="flex flex-wrap flex-row -mx-4">
  <figure class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group">
    <div class="relative overflow-hidden cursor-pointer mb-6">
      <a href="src/img/dummy/img1.jpg" data-gallery="gallery1" class="glightbox3">
        <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img/dummy/img1.jpg" alt="Image Description">
        <figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
          <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Logo Design</h3>
          <small class="d-block">Branding</small>
        </figcaption>
      </a>
    </div>
  </figure>

  <figure class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group">
    <div class="relative overflow-hidden cursor-pointer mb-6">
      <a href="src/img/dummy/img2.jpg" data-gallery="gallery1" class="glightbox3">
        <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img/dummy/img2.jpg" alt="Image Description">
        <figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
          <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Web Development</h3>
          <small class="d-block">Web</small>
        </figcaption>
      </a>
    </div>
  </figure>

  <figure class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group">
    <div class="relative overflow-hidden cursor-pointer mb-6">
      <a href="src/img/dummy/img3.jpg" data-gallery="gallery1" class="glightbox3">
        <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img/dummy/img3.jpg" alt="Image Description">
        <figcaption class="absolute inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-700 text-center">
          <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Graphic Design</h3>
          <small class="d-block">Graphic</small>
        </figcaption>
      </a>
    </div>
  </figure>
</div>
                  
                

Navbar

                  
<nav class="bg-black">
  <div class="xl:container mx-auto px-3 sm:px-4 xl:px-2">
    <div class="flex justify-between">
      <div class="mx-w-10 text-2xl font-bold capitalize text-white flex items-center">Tailnews</div>
      
      <div class="flex flex-row">
        <!-- nav menu -->
        <ul class="navbar hidden lg:flex lg:flex-row text-gray-400 text-sm items-center font-bold">
          <li class="relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="index.html">Home</a>
          </li>
          <li class="dropdown relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="#">Pages</a>

            <ul class="dropdown-menu font-normal absolute left-0 right-auto top-full z-50 border-b-0 text-left bg-white text-gray-700 border border-gray-100" style="min-width: 12rem;">
              <li class="subdropdown relative hover:bg-gray-50">
                <a class="block py-2 px-6 border-b border-gray-100" href="#">
                  Homepage
                </a>

                <!--dropdown submenu-->
                <ul class="dropdown-menu absolute left-full right-auto transform top-full z-50 border-b-0 text-left -mt-10 ml-0 mr-0 bg-white border border-gray-100" style="min-width: 12rem;">
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Homepage 1</a></li>
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Homepage 2</a></li>
                </ul>
              </li>
              <li class="subdropdown relative hover:bg-gray-50">
                <a class="block py-2 px-6 border-b border-gray-100" href="#">
                  Pages
                </a>

                <!--dropdown submenu-->
                <ul class="dropdown-menu absolute left-full right-auto transform top-full z-50 border-b-0 text-left -mt-10 ml-0 mr-0 bg-white border border-gray-100" style="min-width: 12rem;">
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">404</a></li>
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Author</a></li>
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Category</a></li>
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Search</a></li>
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Page</a></li>
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Contact</a></li>
                </ul>
              </li>
              <li class="subdropdown relative hover:bg-gray-50">
                <a class="block py-2 px-6 border-b border-gray-100" href="#">
                  Post
                </a>

                <!--dropdown submenu-->
                <ul class="dropdown-menu absolute left-full right-auto transform top-full z-50 border-b-0 text-left -mt-10 ml-0 mr-0 bg-white border border-gray-100" style="min-width: 12rem;">
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Post default</a></li>
                  <li class="relative hover:bg-gray-50"><a class="block py-2 px-6 border-b border-gray-100" href="#">Post fullwidth</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="#">Sport</a>
          </li>
          <li class="relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="#">Travel</a>
          </li>
          <li class="relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="#">Techno</a>
          </li>
          <li class="relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="#">Worklife</a>
          </li>
          <li class="relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="#">Future</a>
          </li>
          <li class="relative border-l border-gray-800 hover:bg-gray-900">
            <a class="block py-3 px-6 border-b-2 border-transparent" href="#">More</a>
          </li>
        </ul>

        <!-- search form & mobile nav -->
        <div class="flex flex-row items-center text-gray-300">
          <div class="search-dropdown relative border-r lg:border-l border-gray-800 hover:bg-gray-900">
            <button class="block py-3 px-6 border-b-2 border-transparent" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="open bi bi-search" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="close bi bi-x-lg" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
                <path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
              </svg>
            </button>
            <div class="dropdown-menu absolute left-auto right-0 top-full z-50 text-left bg-white text-gray-700 border border-gray-100 mt-1 p-3" style="min-width: 15rem;">
              <div class="flex flex-wrap items-stretch w-full relative">
                <input type="text" class="flex-shrink flex-grow flex-shrink max-w-full leading-5 w-px flex-1 relative py-2 px-5 text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="text" placeholder="Search..." aria-label="search">
                <div class="flex -mr-px">
                  <button class="flex items-center py-2 px-5 -ml-1 leading-5 text-gray-100 bg-black hover:text-white hover:bg-gray-900 hover:ring-0 focus:outline-none focus:ring-0" type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                      <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="relative hover:bg-gray-800 block lg:hidden">
            <button type="button" class="menu-mobile block py-3 px-6 border-b-2 border-transparent">
              <span class="sr-only">Mobile menu</span>
              <svg class="inline-block h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
              </svg> Menu
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
 </nav>
                  
                

Pagination

                  
<nav aria-label="Page navigation">
  <ul class="flex justify-center space-x-0">
    <li>
      <a class="block relative py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:text-gray-100 hover:bg-gray-700 dark:hover:bg-gray-700 -mr-0.5 rounded-l bg-gray-700 dark:bg-gray-700 text-gray-100" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a class="block relative py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:text-gray-100 hover:bg-gray-700 dark:hover:bg-gray-700 -mr-0.5" href="#">1</a></li>
    <li><a class="block relative py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:text-gray-100 hover:bg-gray-700 dark:hover:bg-gray-700 -mr-0.5" href="#">2</a></li>
    <li><a class="block relative py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:text-gray-100 hover:bg-gray-700 dark:hover:bg-gray-700 -mr-0.5" href="#">3</a></li>
    <li>
      <a class="block relative py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:text-gray-100 hover:bg-gray-700 dark:hover:bg-gray-700 -mr-0.5 rounded-r" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
                  
                

Sticky

Main content

                  
<section>
  <div class="flex flex-wrap flex-row -mx-4">
    <div class="flex-shrink max-w-full px-4 w-full md:w-2/3">
      <div class="ex-content text-center py-48 border bg-light mb-6">
        <p>Main content</p>
      </div>
    </div>
    <div class="flex-shrink max-w-full px-4 w-full md:w-1/3">
      <aside class="sticky">
        <div class="ex-sidebar text-center py-6 border bg-light mb-6">
          <p>Sticky content</p>
        </div>
        <div class="ex-sidebar text-center py-6 border bg-light mb-6">
          <p>Sticky content</p>
        </div>
      </aside>
    </div>
  </div>
</section>
                  
                

Playlist Video

                  
<div class="bg-gray-800">
  <div id="main-carousel" class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=0zlZCHxbLng">
          <img src="https://img.youtube.com/vi/0zlZCHxbLng/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=Y8ACyHYsb6Q">
          <img src="https://img.youtube.com/vi/Y8ACyHYsb6Q/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=inBQVChango">
          <img src="https://img.youtube.com/vi/inBQVChango/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=SJkx9EE3isc">
          <img src="https://img.youtube.com/vi/SJkx9EE3isc/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=lNLeRmnkug8">
          <img src="https://img.youtube.com/vi/lNLeRmnkug8/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=leQUhKhTW5c">
          <img src="https://img.youtube.com/vi/leQUhKhTW5c/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=I5WalMD4FLY">
          <img src="https://img.youtube.com/vi/I5WalMD4FLY/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=X-XZx1o_w-A">
          <img src="https://img.youtube.com/vi/X-XZx1o_w-A/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=21YxdZAZo1w">
          <img src="https://img.youtube.com/vi/21YxdZAZo1w/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=FYOH_54XEJY">
          <img src="https://img.youtube.com/vi/FYOH_54XEJY/maxresdefault.jpg" alt="Video title">
        </li>
      </ul>
    </div>
  </div>
  <div id="thumbnail-carousel" class="splide p-3 md:px-6 bg-gray-600 text-white">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/0zlZCHxbLng/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/Y8ACyHYsb6Q/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/inBQVChango/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/SJkx9EE3isc/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/lNLeRmnkug8/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/leQUhKhTW5c/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/I5WalMD4FLY/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/X-XZx1o_w-A/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/21YxdZAZo1w/maxresdefault.jpg" alt="Video title">
        </li>
        <li class="splide__slide">
          <img src="https://img.youtube.com/vi/FYOH_54XEJY/maxresdefault.jpg" alt="Video title">
        </li>
      </ul>
    </div>
  </div>
</div>