NEUTRAL

Search

Posts

The Tourist Destination That... Top 10 Must-Try Street Foods... Master Photography: Tips For...

Pages

About Us Term of Use

Vendors

Carousel Slider

  • tailwind blog template
    May 12, 2024

    Neutral Color is Beautiful

    Neutral Color is Beautiful celebrates the timeless elegance and versatility found in the subtle hues of neutrals. From soft whites to soothing grays, and earthy beiges to calming taupes, neutral colors evoke a sense of serenity and sophistication in any space or design...

    Read More
  • tailwind blog template
    May 12, 2024

    Simple Design is Beautiful

    Neutral Color is Beautiful celebrates the timeless elegance and versatility found in the subtle hues of neutrals. From soft whites to soothing grays, and earthy beiges to calming taupes, neutral colors evoke a sense of serenity and sophistication in any space or design...

    Read More
  • tailwind blog template
    May 12, 2024

    Minimal Layout is Beautiful

    Neutral Color is Beautiful celebrates the timeless elegance and versatility found in the subtle hues of neutrals. From soft whites to soothing grays, and earthy beiges to calming taupes, neutral colors evoke a sense of serenity and sophistication in any space or design...

    Read More 
                
<!-- carousel -->
<div id="hero-carousel" class="splide post-carousel">
  <div class="splide__track">
    <ul class="splide__list">
      <!-- item -->
      <li class="splide__slide">
        <!-- card -->
        <div class="w-full lsoyjes bg-neutral-200 aspect-[1/1] sm:aspect-[3/2] md:aspect-[2/1] flex qjdklap gafhbnc">
          <img src="../src/img/blogs/hero.jpg" alt="tailwind blog template" class="oousjgk w-full inset-x-0 bottom-0">
          <!-- card inside -->
          <div class="lsoyjes bg-white max-w-[80%] lg:max-w-[60%] md:min-w-[60%] aspect-[1/1] sm:aspect-[3/2] md:aspect-[2/1] p-4 sm:p-6 text-center">
            <div class="h-full flex djksgia gafhbnc gap-2 sm:gap-3 zvgdfhg">
              <span class="uppercase text-sm text-neutral-500">May 12, 2024</span>
              <h2 class="text-2xl sm:text-3xl md:text-4xl font-medium">Neutral Color is Beautiful</h2>
              <p class="text-neutral-500 mb-2">Neutral Color is Beautiful celebrates the timeless elegance and versatility found in the subtle hues of neutrals. From soft whites to soothing grays, and earthy beiges to calming taupes, neutral colors evoke a sense of serenity and sophistication in any space or design...</p>
              <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
            </div>
          </div>
        </div>
      </li>
      <!-- item -->
      <li class="splide__slide">
        <!-- card -->
        <div class="w-full lsoyjes bg-neutral-200 aspect-[1/1] sm:aspect-[3/2] md:aspect-[2/1] flex qjdklap gafhbnc">
          <img src="../src/img/blogs/hero.jpg" alt="tailwind blog template" class="oousjgk w-full inset-x-0 bottom-0">
          <!-- card inside -->
          <div class="lsoyjes bg-white max-w-[80%] lg:max-w-[60%] md:min-w-[60%] aspect-[1/1] sm:aspect-[3/2] md:aspect-[2/1] p-4 sm:p-6 text-center">
            <div class="h-full flex djksgia gafhbnc gap-2 sm:gap-3 zvgdfhg">
              <span class="uppercase text-sm text-neutral-500">May 12, 2024</span>
              <h2 class="text-2xl sm:text-3xl md:text-4xl font-medium">Simple Design is Beautiful</h2>
              <p class="text-neutral-500 mb-2">Neutral Color is Beautiful celebrates the timeless elegance and versatility found in the subtle hues of neutrals. From soft whites to soothing grays, and earthy beiges to calming taupes, neutral colors evoke a sense of serenity and sophistication in any space or design...</p>
              <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
            </div>
          </div>
        </div>
      </li>
      <!-- item -->
      <li class="splide__slide">
        <!-- card -->
        <div class="w-full lsoyjes bg-neutral-200 aspect-[1/1] sm:aspect-[3/2] md:aspect-[2/1] flex qjdklap gafhbnc">
          <img src="../src/img/blogs/hero.jpg" alt="tailwind blog template" class="oousjgk w-full inset-x-0 bottom-0">
          <!-- card inside -->
          <div class="lsoyjes bg-white max-w-[80%] lg:max-w-[60%] md:min-w-[60%] aspect-[1/1] sm:aspect-[3/2] md:aspect-[2/1] p-4 sm:p-6 text-center">
            <div class="h-full flex djksgia gafhbnc gap-2 sm:gap-3 zvgdfhg">
              <span class="uppercase text-sm text-neutral-500">May 12, 2024</span>
              <h2 class="text-2xl sm:text-3xl md:text-4xl font-medium">Minimal Layout is Beautiful</h2>
              <p class="text-neutral-500 mb-2">Neutral Color is Beautiful celebrates the timeless elegance and versatility found in the subtle hues of neutrals. From soft whites to soothing grays, and earthy beiges to calming taupes, neutral colors evoke a sense of serenity and sophistication in any space or design...</p>
              <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Post Carousel 

                
<!-- Post carousel -->
<div id="post-carousel" class="splide post-carousel">
  <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/blogs/1.jpg" alt="alt title">
            </a>
            <div class="pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
              <h3 class="text-lg font-medium leading-tight mb-2">
                <a href="#">The Tourist Destination That You Must Visit While On Vacation In Bali</a>
              </h3>
              <a class="text-gray-500" href="#"><span class="inline-block h-3 border-s-2 border-orange-600 me-2"></span>Travel</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/blogs/2.jpg" alt="alt title">
            </a>
            <div class="pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
              <h3 class="text-lg font-medium leading-tight mb-2">
                <a href="#">How To Stay Productive While Traveling For Business</a>
              </h3>
              <a class="text-gray-500" href="#"><span class="inline-block h-3 border-s-2 border-orange-600 me-2"></span>Travel</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/blogs/3.jpg" alt="alt title">
            </a>
            <div class="pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
              <h3 class="text-lg font-medium leading-tight mb-2">
                <a href="#">Top 10 Must-Try Street Foods Around The World</a>
              </h3>
              <a class="text-gray-500" href="#"><span class="inline-block h-3 border-s-2 border-orange-600 me-2"></span>Travel</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/blogs/4.jpg" alt="alt title">
            </a>
            <div class="pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
              <h3 class="text-lg font-medium 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-s-2 border-orange-600 me-2"></span>Travel</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/blogs/5.jpg" alt="alt title">
            </a>
            <div class="pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
              <h3 class="text-lg font-medium leading-tight mb-2">
                <a href="#">Exploring The Virtual Reality: A Technological Revolution In Travel</a>
              </h3>
              <a class="text-gray-500" href="#"><span class="inline-block h-3 border-s-2 border-orange-600 me-2"></span>Travel</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/blogs/6.jpg" alt="alt title">
            </a>
            <div class="pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
              <h3 class="text-lg font-medium leading-tight mb-2">
                <a href="#">Master Photography: Tips For Capturing Stunning Moments</a>
              </h3>
              <a class="text-gray-500" href="#"><span class="inline-block h-3 border-s-2 border-orange-600 me-2"></span>Travel</a>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Gallery

image image image image image image 
                
<!-- Gallery -->
<div class="grid mvdsdfu sm:kdjalsk gap-2">
  <a href="../src/img/blogs/2.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
    <img src="../src/img/blogs/2.jpg" class="duration-300 transition-transform" alt="image">
  </a>
  <a href="../src/img/blogs/7.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
    <img src="../src/img/blogs/7.jpg" class="duration-300 transition-transform" alt="image">
  </a>
  <a href="../src/img/blogs/1.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
    <img src="../src/img/blogs/1.jpg" class="duration-300 transition-transform" alt="image">
  </a>
  <a href="../src/img/blogs/4.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
    <img src="../src/img/blogs/4.jpg" class="duration-300 transition-transform" alt="image">
  </a>
  <a href="../src/img/blogs/5.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
    <img src="../src/img/blogs/5.jpg" class="duration-300 transition-transform" alt="image">
  </a>
  <a href="../src/img/blogs/6.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
    <img src="../src/img/blogs/6.jpg" class="duration-300 transition-transform" alt="image">
  </a>
</div>

Tabs Step

Checkout

Content Step 1

Content Step 2

Content Step 3

Content Step 4

                
<!-- Steps -->
<div x-data="{ tab: 1 }" class="w-full px-6 lg:px-8 py-8">
  <h2 class="text-2xl font-medium text-center mb-8">Checkout</h2>
  <!-- Step -->
  <div class="flex qjdklap gafhbnc mb-10">
    <button @click="tab = 1" :class="{ 'active': tab === 1 }" class="flex gafhbnc gap-2 [&.active_.bi]:bg-orange-200"><i class="size-10 flex qjdklap gafhbnc mnrtsfg bg-neutral-200 bi bi-file-text"></i><span class="max-lg:hidden">Address</span></button>
    <span class="w-12 border-b-2 boclskdj border-neutral-200"></span>
    <button @click="tab = 2" :class="{ 'active': tab === 2 }" class="flex gafhbnc gap-2 [&.active_.bi]:bg-orange-200"><i class="size-10 flex qjdklap gafhbnc mnrtsfg bg-neutral-200 bi bi-truck"></i><span class="max-lg:hidden">Shipping</span></button>
    <span class="w-12 border-b-2 boclskdj border-neutral-200"></span>
    <button @click="tab = 3" :class="{ 'active': tab === 3 }" class="flex gafhbnc gap-2 [&.active_.bi]:bg-orange-200"><i class="size-10 flex qjdklap gafhbnc mnrtsfg bg-neutral-200 bi bi-coin"></i><span class="max-lg:hidden">Payment</span></button>
    <span class="w-12 border-b-2 boclskdj border-neutral-200"></span>
    <button @click="tab = 4" :class="{ 'active': tab === 4 }" class="flex gafhbnc gap-2 [&.active_.bi]:bg-orange-200"><i class="size-10 flex qjdklap gafhbnc mnrtsfg bg-neutral-200 bi bi-eye"></i><span class="max-lg:hidden">Preview</span></button>
  </div>

  <!-- content -->
  <div x-show="tab === 1" class="lsoyjes">
    <h2 class="text-xl font-medium mb-6 pb-3">Content Step 1</h2>
  </div>
  <div x-show="tab === 2" class="lsoyjes">
    <h2 class="text-xl font-medium mb-6 pb-3">Content Step 2</h2>
  </div>
  <div x-show="tab === 3" class="lsoyjes">
    <h2 class="text-xl font-medium mb-6 pb-3">Content Step 3</h2>
  </div>
  <div x-show="tab === 4" class="lsoyjes">
    <h2 class="text-xl font-medium mb-6 pb-3">Content Step 4</h2>
  </div>
</div>

Big Grid

Image description
Europe

Amazon Shoppers Are Ditching Designer Belts for This Best-Selling

 
                
<!-- Big Grid -->
<div class="grid blkgfja lg:mvdsdfu gap-1">
  <!--Start left cover-->
  <div class="lsoyjes zvgdfhg bg-neutral-200 w-full aspect-[4/3.01] [&_img]:hover:scale-110">
    <a href="#">
      <img class="max-w-full w-full mx-auto h-auto duration-500" src="../src/img/blogs/1.jpg" alt="Image description">
    </a>
    <div class="oousjgk px-5 pt-8 pb-5 bottom-0 w-full bg-gradient-to-b from-black/[.01] to-black/60">
      <div class="pb-2">
        <div class="text-neutral-100 text-sm"><div class="inline-block h-3 border-s-2 border-orange-600 me-2"></div>Europe</div>
      </div>
      <a href="#">
        <h2 class="text-xl sm:text-3xl font-medium capitalize text-white mb-3">Amazon Shoppers Are Ditching Designer Belts for This Best-Selling</h2>
      </a>
      <p class="text-neutral-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>
  </div>

  <!--box news-->
  <div class="grid mvdsdfu gap-1">
    <article class="w-full lsoyjes aspect-[4/3] [&_img]:hover:scale-110 zvgdfhg">
      <a href="#">
        <img class="max-w-full w-full mx-auto h-auto duration-500" src="../src/img/blogs/2.jpg" alt="Image description">
      </a>
      <div class="oousjgk px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-to-b from-black/[.01] to-black/60">
        <div class="pb-1">
          <div class="text-neutral-100 text-sm"><div class="inline-block h-3 border-s-2 border-orange-600 me-2"></div>Techno</div>
        </div>
        <a href="#">
          <h2 class="text-sm sm:text-lg font-normal capitalize leading-tight text-white">News magazines are becoming obsolete, replaced by gadgets</h2>
        </a>
      </div>
    </article>
    <article class="w-full lsoyjes aspect-[4/3] [&_img]:hover:scale-110 zvgdfhg">
      <a href="#">
        <img class="max-w-full w-full mx-auto h-auto duration-500" src="../src/img/blogs/3.jpg" alt="Image description">
      </a>
      <div class="oousjgk px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-to-b from-black/[.01] to-black/60">
        <div class="pb-1">
          <div class="text-neutral-100 text-sm"><div class="inline-block h-3 border-s-2 border-orange-600 me-2"></div>Architecture</div>
        </div>
        <a href="#">
          <h2 class="text-sm sm:text-lg font-normal capitalize leading-tight text-white">Minimalist designs are starting to be popular with the next generation</h2>
        </a>
      </div>
    </article>
    <article class="w-full lsoyjes aspect-[4/3] [&_img]:hover:scale-110 zvgdfhg">
      <a href="#">
        <img class="max-w-full w-full mx-auto h-auto duration-500" src="../src/img/blogs/4.jpg" alt="Image description">
      </a>
      <div class="oousjgk px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-to-b from-black/[.01] to-black/60">
        <div class="pb-1">
          <div class="text-neutral-100 text-sm"><div class="inline-block h-3 border-s-2 border-orange-600 me-2"></div>Interior</div>
        </div>
        <a href="#">
          <h2 class="text-sm sm:text-lg font-normal capitalize leading-tight text-white">Tips for decorating the interior of the living room</h2>
        </a>
      </div>
    </article>
    <article class="w-full lsoyjes aspect-[4/3] [&_img]:hover:scale-110 zvgdfhg">
      <a href="#">
        <img class="max-w-full w-full mx-auto h-auto duration-500" src="../src/img/blogs/5.jpg" alt="Image description">
      </a>
      <div class="oousjgk px-4 pt-7 pb-4 bottom-0 w-full bg-gradient-to-b from-black/[.01] to-black/60">
        <div class="pb-1">
          <div class="text-neutral-100 text-sm"><div class="inline-block h-3 border-s-2 border-orange-600 me-2"></div>Lifestyle</div>
        </div>
        <a href="#">
          <h2 class="text-sm sm:text-lg font-normal capitalize leading-tight text-white">Online taxi users are increasing drastically ahead of the new year</h2>
        </a>
      </div>
    </article>
  </div>
</div>