Component:
Service Travel Light

Name: Service Travel Light
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Service Page Section Sale Travel Light
Colors:
Description:
This carefully crafted Service component is perfect for Travel landing pages, featuring a Light design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Service
@industry: Travel
@style: Light
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->

<style>
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(40px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  .animate-slideInLeft {
    animation: slideInLeft 0.8s ease-out forwards;
  }

  .animate-slideInRight {
    animation: slideInRight 0.8s ease-out forwards;
  }

  .service-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  }
</style>

<section class="bg-gradient-to-br from-emerald-50 via-gray-50 to-emerald-50 relative py-16 md:py-20 overflow-hidden">
  <!-- Background Decorative Elements -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-10 left-10 w-32 h-32 bg-emerald-200 rounded-full opacity-20"></div>
    <div class="absolute top-40 right-20 w-24 h-24 bg-red-200 rounded-full opacity-30"></div>
    <div class="absolute bottom-20 left-1/4 w-20 h-20 bg-emerald-300 rounded-full opacity-25">
    </div>
    <div class="absolute bottom-40 right-1/3 w-28 h-28 bg-red-100 rounded-full opacity-20">
    </div>
  </div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

    <!-- Section Header -->
    <div class="text-center mb-16 animate-fadeInUp">
      <div
        class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg mb-6 border border-emerald-100">
        <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
        <span class="text-sm font-medium text-gray-700">Our Services</span>
      </div>

      <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
        Everything You Need for Perfect Travel
      </h2>

      <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
        From dream destinations to seamless bookings, we provide comprehensive travel solutions that make your journey
        unforgettable and stress-free.
      </p>
    </div>

    <!-- Main Services Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">

      <!-- Flight Booking Service -->
      <div
        class="service-card bg-white rounded-3xl p-8 border border-gray-200 shadow-xl animate-fadeInUp">
        <div
          class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Flight Booking</h3>
        <p class="text-gray-600 mb-6 leading-relaxed">
          Find and book flights to over 500 destinations worldwide with our advanced search engine and exclusive
          deals.
        </p>
        <ul class="space-y-2 mb-6">
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-emerald-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            Best price guarantee
          </li>
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-emerald-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            24/7 customer support
          </li>
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-emerald-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            Flexible cancellation
          </li>
        </ul>
        <button
          class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-3 rounded-xl transition-colors duration-300">
          Book Flights
        </button>
      </div>

      <!-- Hotel Reservations -->
      <div
        class="service-card bg-white rounded-3xl p-8 border border-gray-200 shadow-xl animate-fadeInUp">
        <div
          class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Hotel Reservations</h3>
        <p class="text-gray-600 mb-6 leading-relaxed">
          Choose from luxury resorts to budget-friendly accommodations with verified reviews and instant confirmation.
        </p>
        <ul class="space-y-2 mb-6">
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            1M+ hotels worldwide
          </li>
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            Instant confirmation
          </li>
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            Free cancellation
          </li>
        </ul>
        <button
          class="w-full bg-red-500 hover:bg-red-600 text-white font-semibold py-3 rounded-xl transition-colors duration-300">
          Find Hotels
        </button>
      </div>

      <!-- Tour Packages -->
      <div
        class="service-card bg-white rounded-3xl p-8 border border-gray-200 shadow-xl animate-fadeInUp">
        <div
          class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Tour Packages</h3>
        <p class="text-gray-600 mb-6 leading-relaxed">
          Expertly curated tour packages combining the best attractions, experiences, and local insights for memorable
          journeys.
        </p>
        <ul class="space-y-2 mb-6">
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-emerald-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            Expert local guides
          </li>
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-emerald-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            Small group sizes
          </li>
          <li class="flex items-center text-sm text-gray-600">
            <svg class="w-4 h-4 text-emerald-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            Cultural immersion
          </li>
        </ul>
        <button
          class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-3 rounded-xl transition-all duration-300">
          Explore Tours
        </button>
      </div>
    </div>

    <!-- Additional Services -->
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">

      <!-- Car Rentals -->
      <div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200 animate-slideInLeft cursor-pointer">
        <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-emerald-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
            <path
              d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2" />
            <circle cx="7" cy="17" r="2" />
            <path d="M9 17h6" />
            <circle cx="17" cy="17" r="2" />
          </svg>
        </div>
        <h4 class="text-lg font-semibold text-gray-900 mb-2">Car Rentals</h4>
        <p class="text-gray-600 text-sm mb-3">Flexible car rental options from economy to luxury vehicles.</p>
        <div class="text-emerald-600 font-semibold text-sm">From $25/day →</div>
      </div>

      <!-- Travel Insurance -->
      <div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200 animate-slideInLeft cursor-pointer">
        <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>
        <h4 class="text-lg font-semibold text-gray-900 mb-2">Travel Insurance</h4>
        <p class="text-gray-600 text-sm mb-3">Comprehensive coverage for medical emergencies and trip protection.</p>
        <div class="text-red-600 font-semibold text-sm">Get Quote →</div>
      </div>

      <!-- Visa Assistance -->
      <div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200 animate-slideInRight cursor-pointer">
        <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>
        </div>
        <h4 class="text-lg font-semibold text-gray-900 mb-2">Visa Assistance</h4>
        <p class="text-gray-600 text-sm mb-3">Expert help with visa applications and documentation requirements.</p>
        <div class="text-emerald-600 font-semibold text-sm">Learn More →</div>
      </div>

      <!-- 24/7 Support -->
      <div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200 animate-slideInRight cursor-pointer">
        <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <circle cx="12" cy="12" r="9.75" stroke="currentColor" stroke-width="2" />
            <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 7v5l3 3" />
          </svg>
        </div>
        <h4 class="text-lg font-semibold text-gray-900 mb-2">24/7 Support</h4>
        <p class="text-gray-600 text-sm mb-3">Round-the-clock customer service for peace of mind during travel.</p>
        <div class="text-red-600 font-semibold text-sm ">Contact Us →</div>
      </div>
    </div>
  </div>
</section>
Service Travel Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
