Highlights - Speakers Section

This tailwind example is contributed by ABDO-SY, on 07-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Card Feature showcase

Author ABDO-SY

Tailwind v3.4 1.3k 4

Fork Fullscreen

<section class="px-6  sm:px-8 md:px-10 flex flex-col md:flex-row gap-8 md:gap-3 xl:gap-5 py-20 justify-center bg-white dark:bg-gray-800 ">
  <div
    class="px-[35px] py-[50px] xl:px-[50px] xl:py-[60px] w-full md:w-1/2 xl:w-[535px] flex flex-col justify-between bg-[#0147ff] rounded-[50px]">
    <div>
      <div class="w-80 text-white text-3xl sm:text-4xl font-bold ">Speakers</div>
      <div class="mt-9 flex  justify-between "><svg width="74" height="74" class="xl:inline-block hidden"
          viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="37" cy="37" r="37" fill="#D9D9D9"></circle>
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M32.6256 27.5208C32.6256 26.6809 33.3247 26 34.1872 26H47.4383C48.3008 26 49 26.6809 49 27.5208V40.4253C49 41.2652 48.3008 41.9461 47.4383 41.9461C46.5759 41.9461 45.8767 41.2652 45.8767 40.4253V31.1924L28.6659 47.953C28.0561 48.5469 27.0673 48.5469 26.4574 47.953C25.8475 47.359 25.8475 46.3961 26.4574 45.8022L43.6682 29.0416H34.1872C33.3247 29.0416 32.6256 28.3607 32.6256 27.5208Z"
            fill="#0147FF"></path>
        </svg>
        <div class="xl:w-[300px] text-white text-lg sm:text-xl font-normal  leading-loose">Hear from global AI leaders,
          researchers, and entrepreneurs who are defining the future of artificial intelligence.</div>
      </div>
    </div>
    <div class="mt-10  flex flex-row md:flex-col gap-5 items-center  xl:gap-0 xl:flex-row justify-between">
      <figure class="sm:flex hidden  -space-x-10 lg:-space-x-0 xl:-space-x-10 md:-space-x-8">
        <img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png"><img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png"><img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png"><img class="w-20 h-20 mr-0[-40px] rounded-[100px]" src="https://iili.io/3YxKvta.png">
      </figure>
      <button class="px-6 py-3 sm:px-8 sm:py-5 w-full sm:w-auto  md:w-full xl:w-auto   rounded-[100px]  border border-white flex justify-center items-center gap-5  text-white text-xl sm:text-2xl font-medium ">And more<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.89715 1.65427C4.89715 1.01678 5.41394 0.5 6.05142 0.5H15.8457C16.4832 0.5 17 1.01678 17 1.65427V11.4486C17 12.0861 16.4832 12.6028 15.8457 12.6028C15.2082 12.6028 14.6915 12.0861 14.6915 11.4486V4.44092L1.97046 17.1619C1.51969 17.6127 0.788848 17.6127 0.338078 17.1619C-0.112693 16.7112 -0.112693 15.9803 0.338078 15.5295L13.0591 2.80854H6.05142C5.41394 2.80854 4.89715 2.29176 4.89715 1.65427Z" fill="white"></path></svg></button>
    </div>
  </div>
  <div class="w-full md:w-1/2 ">
    <div class="w-full md:max-w-[670px] px-[35px] py-[50px] xl:px-[50px] xl:py-[60px] bg-[#0147ff] rounded-[50px]">
      <h2 class="text-white text-3xl sm:text-4xl font-bold ">Technologies</h2>
      <p class="mt-9 text-white text-lg  sm:text-xl font-normal  leading-loose">Explore advanced machine learning,
        natural language processing, AI-driven automation, and emerging cybersecurity applications.</p>
    </div>
    <div
      class="mt-8 md:mt-3 xl:mt-5 w-full md:max-w-[670px] px-[35px] py-[50px] xl:px-[50px] xl:py-[60px]  bg-[#dedee0] rounded-[50px]">
      <h2 class=" text-[#1c1a1a] text-3xl sm:text-4xl font-bold ">Networking Opportunities</h2>
      <p class="mt-9 text-[#1c1a1a] text-lg  sm:text-xl font-normal  leading-loose">Enjoy exclusive networking sessions,
        roundtables, and social events to foster collaboration and spark new partnerships.</p>
    </div>
  </div>
</section>

Related Examples

Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
Features grid

Sophia Baker

3 years ago

10.8k
Feature cards with icons on top

Manon Daniel

3 years ago

18.2k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Ragnar lodbrok

2 years ago

5.9k
Feature Highlights cards

Carla Hoffman

2 years ago

3.1k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k
Animated cards

Michael Andreuzza

2 years ago

7.4k
Features

Michael Andreuzza

2 years ago

5.6k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Mike Varen

2 years ago

4.7k