Home
Juraj
Team Hero Section with Carousel

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 CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Carousel Contact us Hero Team

Author Juraj

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

3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.7k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 year ago

2.3k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 year ago

1.8k
home
html , css

Author:
Hacker Development

9 months ago

1.9k
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

9 months ago

2.1k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

8 months ago

1.2k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

8 months ago

1.5k
basichtml
this is basic html

Author:
Anonymous

7 months ago

478
basichtml
this is basic html

Author:
Anonymous

7 months ago

428
Visernic Profile

Author:
MD Mostafa Niloy

3 months ago

479
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

1 month ago

109
hero modern
hero modern

Author:
Omer fils ELENGA

1 month ago

127

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components