Components

Tailone is assembled with reusable components. Various components suitable for creating one page sites.

Buttons

Our Work Contact Us 
                  
<a class="py-2.5 px-10 inline-block text-center leading-normal text-gray-900 bg-white border-b border-gray-100 hover:text-black hover:ring-0 focus:outline-none focus:ring-0 mr-4" href="#portfolio">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block mr-1" width="1.5rem" height="1.5rem" fill="currentColor" viewBox="0 0 512 512"><path d="M304,384V360c0-29,31.54-56.43,52-76,28.84-27.57,44-64.61,44-108,0-80-63.73-144-144-144A143.6,143.6,0,0,0,112,176c0,41.84,15.81,81.39,44,108,20.35,19.21,52,46.7,52,76v24" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="224" y1="480" x2="288" y2="480" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="208" y1="432" x2="304" y2="432" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="256" y1="384" x2="256" y2="256" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M294,240s-21.51,16-38,16-38-16-38-16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
 Our Work
</a>

<a class="py-2.5 px-10 inline-block text-center leading-normal text-gray-100 bg-black border-b border-gray-800 hover:text-white hover:ring-0 focus:outline-none focus:ring-0" href="#contact">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block mr-1" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="96" width="416" height="320" rx="40" ry="40" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="112 160 256 272 400 160" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
 Contact Us
</a>

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

Typed Js

Your typed 

                  
<h4 class="mb-4">Your typed <span data-toggle="typed" data-options='{"strings": ["Online Marketing", "Web Design", "Mobile Apps", "Brand Identity", "Social Content"]}'></span></h4>

Carousel

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description 
                  
<!-- slider client -->
<div id="post-carousel" class="navslider-hover splide post-carousel">
  <div class="splide__track">
    <div class="splide__list grayscale">
      <div class="splide__slide">
        <div class="w-full px-4 text-center pb-3">
          <a href="#" target="_blank">
            <img class="grayscale mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="../src/img/dummy/img1.png" alt="Image Description">
          </a>
        </div>
      </div>
      <div class="splide__slide">
        <div class="w-full px-4 text-center pb-3">
          <a href="#" target="_blank">
            <img class="grayscale mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="../src/img/dummy/img2.png" alt="Image Description">
          </a>
        </div>
      </div>
      <div class="splide__slide">
        <div class="w-full px-4 text-center pb-3">
          <a href="#" target="_blank">
            <img class="grayscale mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="../src/img/dummy/img3.png" alt="Image Description">
          </a>
        </div>
      </div>
      <div class="splide__slide">
        <div class="w-full px-4 text-center pb-3">
          <a href="#" target="_blank">
            <img class="grayscale mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="../src/img/dummy/img4.png" alt="Image Description">
          </a>
        </div>
      </div>
      <div class="splide__slide">
        <div class="w-full px-4 text-center pb-3">
          <a href="#" target="_blank">
            <img class="grayscale mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="../src/img/dummy/img5.png" alt="Image Description">
          </a>
        </div>
      </div>
      <div class="splide__slide">
        <div class="w-full px-4 text-center pb-3">
          <a href="#" target="_blank">
            <img class="grayscale mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="../src/img/dummy/img6.png" alt="Image Description">
          </a>
        </div>
      </div>
    </div>
  </div>
</div><!-- end slider client -->

Wow Js

One
Two
Three 
                  
<div class="flex flex-wrap flex-row -mx-4 text-center">
  <div class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp" data-wow-duration="1s">
    <div class="py-8 px-12 mb-12 bg-white border-b border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2">
      One
    </div>
  </div>
  <div class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
    <div class="py-8 px-12 mb-12 bg-white border-b border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2">
      Two
    </div>
  </div>
  <div class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
    <div class="py-8 px-12 mb-12 bg-white border-b border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2">
      Three
    </div>
  </div>
</div>

Gallery

Image Description

Logo Design

Branding
Image Description

Web Development

Web
Image Description

Graphic Design

Graphic 
                  
<div class="flex flex-wrap flex-row">
  <figure class="flex-shrink max-w-full px-3 w-full sm:w-1/2 lg:w-1/5 group wow fadeInUp" data-wow-duration="1s">
    <div class="relative overflow-hidden cursor-pointer mb-6">
      <a href="../src/img/dummy/img1.jpg" data-gallery="gallery1" data-glightbox="title: My title; description: This is a wider card with supporting text below as a natural lead-in to additional content" class="glightbox3">
        <img class="block w-full h-auto transform duration-500 grayscale hover:scale-125" src="../src/img/dummy/img1.jpg" alt="Image Description">
        <div 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-black text-center">
          <h3 class="text-base leading-normal font-semibold my-1 text-white">Logo Design</h3>
          <small class="d-block">Branding</small>
        </div>
      </a>
    </div>
  </figure>

  <figure class="flex-shrink max-w-full px-3 w-full sm:w-1/2 lg:w-1/5 group wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
    <div class="relative overflow-hidden cursor-pointer mb-6">
      <a href="../src/img/dummy/img2.jpg" data-gallery="gallery1" data-glightbox="title: My title; description: This is a wider card with supporting text below as a natural lead-in to additional content" class="glightbox3">
        <img class="block w-full h-auto transform duration-500 grayscale hover:scale-125" src="../src/img/dummy/img2.jpg" alt="Image Description">
        <div 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-black text-center">
          <h3 class="text-base leading-normal font-semibold my-1 text-white">Web Development</h3>
          <small class="d-block">Web</small>
        </div>
      </a>
    </div>
  </figure>

  <figure class="flex-shrink max-w-full px-3 w-full sm:w-1/2 lg:w-1/5 group wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
    <div class="relative overflow-hidden cursor-pointer mb-6">
      <a href="../src/img/dummy/img3.jpg" data-gallery="gallery1" data-glightbox="title: My title; description: This is a wider card with supporting text below as a natural lead-in to additional content" class="glightbox3">
        <img class="block w-full h-auto transform duration-500 grayscale hover:scale-125" src="../src/img/dummy/img3.jpg" alt="Image Description">
        <div 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-black text-center">
          <h3 class="text-base leading-normal font-semibold my-1 text-white">Graphic Design</h3>
          <small class="d-block">Graphic</small>
        </div>
      </a>
    </div>
  </figure>
</div>

Team

title image

Joe Antonio

Founder CEO

title image

Sarah Daeva

Marketing

                  
<div class="flex flex-wrap flex-row -mx-4 justify-center">
  <div class="flex-shrink max-w-full px-4 w-2/3 sm:w-1/2 md:w-5/12 lg:w-1/4 xl:px-6">
    <div class="relative overflow-hidden bg-white dark:bg-gray-800 mb-12 hover-grayscale-0 wow fadeInUp" data-wow-duration="1s">
      <!-- team block -->
      <div class="relative overflow-hidden px-6">
        <img src="../src/img/dummy/avatar1.png" class="max-w-full h-auto mx-auto rounded-full bg-gray-50 grayscale" alt="title image">
      </div>
      <div class="pt-6 text-center">
        <p class="text-lg leading-normal font-bold mb-1">Joe Antonio</p>
        <p class="text-gray-500 leading-relaxed font-light">Founder CEO</p>
        <!-- social icon -->
        <div class="mt-2 mb-5 space-x-2">
          <a class="hover:text-blue-700" aria-label="Twitter link" href="#">
            <!-- <i class="fab fa-twitter text-twitter"></i> -->
             <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path></svg>
          </a>
          <a class="hover:text-blue-700" aria-label="Facebook link" href="#">
            <!-- <i class="fab fa-facebook text-facebook"></i> -->
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path></svg>
          </a>
          <a class="hover:text-blue-700" aria-label="Instagram link" href="#">
            <!-- <i class="fab fa-instagram text-instagram"></i> -->
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"></path><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"></path><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"></path></svg>
          </a>
          <a class="hover:text-blue-700" aria-label="Linkedin link" href="#">
            <!-- <i class="fab fa-linkedin text-linkedin"></i> -->
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"></path></svg>
          </a>
        </div>
      </div>
    </div><!-- end team block -->
  </div>

  <div class="flex-shrink max-w-full px-4 w-2/3 sm:w-1/2 md:w-5/12 lg:w-1/4 xl:px-6">
    <!-- team block -->
    <div class="relative overflow-hidden bg-white dark:bg-gray-800 mb-12 hover-grayscale-0 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
      <div class="relative overflow-hidden px-6">
        <img src="../src/img/dummy/avatar3.png" class="max-w-full h-auto mx-auto rounded-full bg-gray-50 grayscale" alt="title image">
      </div>
      <div class="pt-6 text-center">
        <p class="text-lg leading-normal font-bold mb-1">Sarah Daeva</p>
        <p class="text-gray-500 leading-relaxed font-light">Marketing</p>
        <!-- social icon -->
        <div class="mt-2 mb-5 space-x-2">
          <a class="hover:text-blue-700" aria-label="Twitter link" href="#">
            <!-- <i class="fab fa-twitter text-twitter"></i> -->
             <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path></svg>
          </a>
          <a class="hover:text-blue-700" aria-label="Facebook link" href="#">
            <!-- <i class="fab fa-facebook text-facebook"></i> -->
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path></svg>
          </a>
          <a class="hover:text-blue-700" aria-label="Instagram link" href="#">
            <!-- <i class="fab fa-instagram text-instagram"></i> -->
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"></path><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"></path><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"></path></svg>
          </a>
          <a class="hover:text-blue-700" aria-label="Linkedin link" href="#">
            <!-- <i class="fab fa-linkedin text-linkedin"></i> -->
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"></path></svg>
          </a>
        </div>
      </div>
    </div><!-- end team block -->
  </div>
</div>

Scroll Spy

                  
<!-- nav menu -->
<ul class="navbar bg-white lg:bg-transparent w-full hidden text-center lg:text-left lg:flex lg:flex-row text-gray-900 text-sm items-center font-bold">
  <li class="relative hover:text-black">
    <a class="active block py-3 lg:py-7 px-6 border-b-2 border-transparent" href="#hero">Home</a>
  </li>
  <li class="relative hover:text-black">
    <a class="block py-3 lg:py-7 px-6 border-b-2 border-transparent" href="#services">What we do</a>
  </li>
</ul>
<!-- sections -->
<div id="hero" class="section py-12 bg-red-300"></div>
<div id="services" class="section bg-green-300 py-12"></div>

Example spinner and Ping

                  
                    <div class="inline-block">
                      <svg class="animate-spin h-5 w-5 text-blue-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                    </div>

                    <div class="inline-block">
                      <svg class="animate-spin h-5 w-5 text-red-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                    </div>

                    <div class="inline-block">
                      <svg class="animate-spin h-5 w-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                    </div>

                    <div class="inline-block">
                      <svg class="animate-spin h-5 w-5 text-green-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                    </div>

                    <div class="inline-block">
                      <span class="relative flex h-5 w-5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-5 w-5 bg-blue-500"></span>
                      </span>
                    </div>

                    <div class="inline-block">
                      <span class="relative flex h-5 w-5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-5 w-5 bg-red-500"></span>
                      </span>
                    </div>

                    <div class="inline-block">
                      <span class="relative flex h-5 w-5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-5 w-5 bg-yellow-500"></span>
                      </span>
                    </div>

                    <div class="inline-block">
                      <span class="relative flex h-5 w-5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-5 w-5 bg-green-500"></span>
                      </span>
                    </div>

Note: You can edit spinner size with change h-5 w-5 classes

Preloader

Preloader is the what you see on some sites before the main content of the web page is loaded.

                  
                    <!-- preloader -->
                    <div class="preloader loaded-success fixed inset-0 z-50 bg-gray-50">
                      <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2">
                        <div class="relative mx-auto my-12">
                          <div class="inline-block">
                            <svg class="animate-spin h-8 w-8 text-blue-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                          </div>
                        </div>
                      </div>
                    </div>

Add loader-wrapper just below the body tag