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.7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

940
Services
Card Services Section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Nikita

2 years ago

5.8k
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

16k
Feature cards with icons on top

Manon Daniel

3 years ago

18.2k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

789
Typical feature

Matti

1 year ago

1.9k
Our services component

Anonymous

2 years ago

2.6k
interactive testimonial with Tailwind CSS and Alpine.js

Michael Andreuzza

2 years ago

2.9k