Feature: Switch-Special

Here a special feature-showcase. I hope you like it ;)

This tailwind example is contributed by Matti, on 06-Dec-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

Tailwind v3.4 2.2k 4

Fork Fullscreen

<section class="my-24 w-full bg-white dark:bg-gray-700">
  <div class="w-full mx-auto flex flex-col sm:w-[90%] md:w-4/5 md:flex-row c-w-3xl-66">
      <div class="w-full flex md:w-1/2 flex-col text-center md:!text-left px-2 py-0 md:py-6 self-center">
        <h1 class="text-4xl md:text-5xl font-semibold text-gray-800 dark:text-white">
            The <span class="text-emerald-600"> Feature</span> of ...
        </h1>
        <p class="w-full px-3 md:!px-0 md:pr-8 text-normal md:text-xl dark:text-white my-6">
          One of a lot of features is that's free for ever. You can copy and paste it or modify however you want. Feel free to name the author in a hidden remark or to set the components as favorite.
        </p>
      </div>
    <div class="w-full flex md:w-1/2 flex-col md:flex-row">
      <div id="feature-0" onclick="javascript:showFeature('feature-0', 'title-0', 'content-0');" class="rounded-md bg-gray-50 md:[writing-mode:vertical-lr] md:min-h-80 md:max-h-80 mr-0 md:mr-2 pb-3 md:!pb-0 mb-6 md:!mb-0">
          <h1 id="title-0" class="mx-4 mt-4 font-semibold cursor-pointer"><span class="text-emerald-500">Explore</span> your posibillity.</h1>
        <div id="content-0" class="hidden transition-all duration-300 px-6 py-6 justify-items-center">
          <img src="https://placehold.co/75x75" title="" alt="" class="mb-4 rounded-full" />
          <h1 class="relative top-0 mb-4 font-semibold"><span class="text-emerald-500">Explore</span> your posibillity.</h1>
          <div class="duration-400 mb-6 w-[95%] flex-none text-center text-[90%] transition-all">
            Here a another example for a good feature showcase. If you like than click an favorite-component to show me. Thanks in advanced...
          </div>
          <button class="rounded-md border border-current bg-emerald-500 px-5 py-2 text-sm text-white hover:border-emerald-500 hover:bg-white hover:!text-gray-800">explore now</button>
        </div>
      </div>
      <div id="feature-1" onclick="javascript:showFeature('feature-1', 'title-1', 'content-1');" class="rounded-md bg-gray-50 md:[writing-mode:vertical-lr] md:min-h-80 md:max-h-80 mr-0 md:mr-2 pb-3 md:!pb-0 mb-6 md:!mb-0">
          <h1 id="title-1" class="mx-4 mt-4 font-semibold cursor-pointer"><span class="text-emerald-500">Another</span> content area.</h1>
        <div id="content-1" class="hidden transition-all duration-300 px-6 py-6 justify-items-center">
          <img src="https://placehold.co/75x75" title="" alt="" class="mb-4 rounded-full" />
          <h1 class="relative top-0 mb-4 font-semibold"><span class="text-emerald-500">Another</span> content area.</h1>
          <div class="duration-400 mb-6 w-[95%] flex-none text-center text-[90%] transition-all">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam ...
          </div>
          <button class="rounded-md border border-current bg-emerald-500 px-5 py-2 text-sm text-white hover:border-emerald-500 hover:bg-white hover:!text-gray-800">explore now</button>
        </div>
      </div>
      <div id="feature-2" onclick="javascript:showFeature('feature-2', 'title-2', 'content-2');" class="rounded-md bg-gray-50 md:[writing-mode:vertical-lr] md:min-h-80 md:max-h-80 mr-0 md:mr-2 pb-3 md:!pb-0 mb-6 md:!mb-0">
          <h1 id="title-2" class="mx-4 mt-4 font-semibold cursor-pointer">Last <span class="text-emerald-500">but not</span> least.</h1>
        <div id="content-2" class="hidden transition-all duration-300 px-6 py-6 justify-items-center">
          <img src="https://placehold.co/75x75" title="" alt="" class="mb-4 rounded-full" />
          <h1 class="relative top-0 mb-4 font-semibold"><span class="text-emerald-500">Another</span> content area.</h1>
          <div class="duration-400 mb-6 w-[95%] flex-none text-center text-[90%] transition-all">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam ...
          </div>
          <button class="rounded-md border border-current bg-emerald-500 px-5 py-2 text-sm text-white hover:border-emerald-500 hover:bg-white hover:!text-gray-800">explore now</button>
        </div>
      </div>
    </div>
  </div>
<script>
  function showFeature(e,t,s){for(i=0;i<4;i++){let d=document.getElementById("feature-"+i),l=document.getElementById("title-"+i),a=document.getElementById("content-"+i);/*https://tailwindflex.com/@matti*/"feature-"+i==e?(window.screen.width>1240?(d.classList.add("w-3/5"),d.classList.remove("md:[writing-mode:vertical-lr]")):d.classList.add("w-full"),l.classList.add("hidden"),a.classList.remove("hidden")):(window.screen.width>1240?(d.classList.remove("w-3/5"),d.classList.add("md:[writing-mode:vertical-lr]")):d.classList.remove("w-full"),/*https://tailwindflex.com/@matti*/l.classList.remove("hidden"),a.classList.add("hidden"))}}showFeature("feature-0","title-0","content-0");
</script>
</section>

Related Examples

Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

KULDEEP

1 year ago

1.8k
Highlights - Speakers Section

ABDO-SY

1 year ago

1.4k
Hotel rooms
A simple room overview

Matti

1 year ago

2.1k
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.

kzsamir849

2 years ago

2.7k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Hezron Okoko

2 years ago

3.5k
Responsive Features Section

ariaw

1 year ago

1.7k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16.1k
Features grid with icon

Freja Jensen

3 years ago

11.7k
Feature tiles

Nishant Trivedi

3 years ago

15.2k
Product features list with inner border

Lîmåã M

3 years ago

15.2k
Features showcase section
showcase key features and benefits

Mereani Waqa

2 years ago

7.8k
Product feature showccase section with images

R.P Ketan

3 years ago

17k