Components

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

Big Grid

Amazon Shoppers Are Ditching Designer Belts for This Best-Selling

This is a wider card with supporting text below as a natural lead-in to additional content. This very helpfull for generate default content..

Europe

News magazines are becoming obsolete, replaced by gadgets

Techno

Minimalist designs are starting to be popular with the next generation

Architecture

Tips for decorating the interior of the living room

Interior

Online taxi users are increasing drastically ahead of the new year

Lifestyle

                  
<!-- 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

5 Tips to Save Money Booking Your Next Hotel Room

This is a wider card with supporting text below as a natural lead-in to additional content.

Europe

5 Tips to Save Money Booking Your Next Hotel Room

This is a wider card with supporting text below as a natural lead-in to additional content.

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

                  
<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>