Home
ABDO-SY
Highlights - Speakers Section

Highlights - Speakers Section

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

Card Feature showcase

Author ABDO-SY

869

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

Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Author:
Matti

11 months ago

1.2k
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

3 weeks ago

231
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.8k
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

10 months ago

1.1k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.5k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

8 months ago

712
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

1 year ago

2.4k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

7 months ago

923
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.5k
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

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

Author:
Ameth Galarcio

11 months ago

1.8k
Service section

Author:
inbarajan P

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components