Advertisement

# 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

## American

- ### 5 Tips to Save Money Booking Your Next Hotel Room

  Europe

- ### 5 Tips to Save Money Booking Your Next Hotel Room

  Europe

- ### 5 Tips to Save Money Booking Your Next Hotel Room

  Europe

- ### 5 Tips to Save Money Booking Your Next Hotel Room

  Europe

- ### 5 Tips to Save Money Booking Your Next Hotel Room

  Europe

- ### 5 Tips to Save Money Booking Your Next Hotel Room

  Europe

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

Input
Password
Email
Select
Textarea
Checkbox

    <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

### Logo Design

Branding

### Web Development

Web

### Graphic Design

Graphic

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