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

login_form
used for user to logging in

Author:
nii fanny

8 months ago

475
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

1 year ago

1.9k
Hotel management
dashboard used in hotel management system

Author:
Frederick250

8 months ago

2.3k
Greenwood high school
To empower students to achieve academic excellence, develop strong character, and become responsible global citizens through innovative teaching, personalized learning, and a commitment to lifelong growth.

Author:
INGRIDE MUZIRANENGE

8 months ago

868
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

8 months ago

1.7k
Hero_Page
#heropage #landingpage

Author:
Rupesh

6 months ago

506
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

8 months ago

1.1k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.9k
Hero simple
hero design simple

Author:
QQ-VVN

8 months ago

1.4k
Glassmorphism form

Author:
Sophia Baker

2 years ago

18.4k
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.9k
Garden
by salvator

Author:
Baraka Salvator

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components