Team Hero Section with Carousel

A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js.
The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

This tailwind example is contributed by Juraj, on 24-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Carousel Contact us Hero Team

Author Juraj

Tailwind v3.4 516 1

Fork Fullscreen

<script src="https://cdn.tailwindcss.com"></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="space-y-6">
        <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 leading-tight">
          Talk to Our Experts
        </h1>

<p class="text-lg text-slate-600 max-w-xl">
          Get in touch with our certified experts. Call directly or schedule a
          consultation and get answers fast.
        </p>
      </div>

<div class="relative">
        <div class="swiper" x-ref="swiperEl">
          <div class="swiper-wrapper">

<a
                    :href="expert.link"
                    class="mt-auto inline-flex justify-center rounded-xl bg-sky-600 px-6 py-3 font-bold text-white hover:bg-indigo-700 transition"
                  >
                    Talk to an Expert
                  </a>
                </article>
              </div>
            </template>

</div>
        </div>

<div class="mt-8 flex justify-center gap-4">
  <button
    @click="prev()"
    class="flex h-12 w-12 items-center justify-center rounded-full
           border border-slate-200 bg-white
           text-slate-600
           hover:border-slate-300 hover:bg-slate-100 hover:text-slate-900
           transition"
    aria-label="Previous"
  >
    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
    </svg>
  </button>

</div>
    </div>
  </div>
</section>
<script>
  function expertsHero() {
    return {
      swiper: null,

experts: [
        {
          id: 1,
          name: "John Miller",
          phone: "+421 900 123 456",
          link: "#",
          avatar: "https://i.pravatar.cc/200?img=12",
        },
        {
          id: 2,
          name: "Anna Novak",
          phone: "+421 911 222 333",
          link: "#",
          avatar: "https://i.pravatar.cc/200?img=32",
        },
        {
          id: 3,
          name: "Peter Schmidt",
          phone: "+421 944 555 666",
          link: "#",
          avatar: "https://i.pravatar.cc/200?img=56",
        },
        {
          id: 4,
          name: "Laura White",
          phone: "+421 955 888 999",
          link: "#",
          avatar: "https://i.pravatar.cc/200?img=45",
        },
        
        {
          id: 5,
          name: "Laura ",
          phone: "+421 955 888 999",
          link: "#",
          avatar: "https://i.pravatar.cc/200?img=45",
        },
        
        {
          id: 6,
          name: " White",
          phone: "+421 955 888 999",
          link: "#",
          avatar: "https://i.pravatar.cc/200?img=45",
        },
      ],

init() {
        this.swiper = new Swiper(this.$refs.swiperEl, {
          loop: true,
          speed: 400,
          spaceBetween: 24,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          breakpoints: {
            0: { slidesPerView: 1 },
            768: { slidesPerView: 2 },
          },
        });
      },

prev() {
        this.swiper.slidePrev();
      },

next() {
        this.swiper.slideNext();
      },
    };
  }
</script>

Related Examples

LIQUID PLASMA by omerlinks
LIQUID PLASMA by omerlinks

Omer fils ELENGA

9 months ago

648
Landing page

Maxim

1 year ago

2.8k
contact form
contact form

Geoffrey Callaghan

2 years ago

7.9k
No distraction search field

_Amar_

3 years ago

12.5k
landi page template

Raul antonio de la cruz hernandez

9 months ago

640
Contact Information section with form
A section that displays ways to connect, featuring icons for social media and clickable email addresses.

Geoffrey Callaghan

2 years ago

6.6k
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

gidy

11 months ago

1.2k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k
Hero section

iamlos

1 year ago

2.2k
Contact us Form with Responsive

KULDEEP

1 year ago

1.2k
Banner Slider

JUGENDRA GANGWAR

1 month ago

288
flower
by salvator

Baraka Salvator

1 year ago

1.8k