Home
Matti
Feature: Switch-Special

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

1.2k

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

House Cleaning Website Services Section
House Cleaning Website Services Section Photo by @candjstudios & @framesforyourheart on Unsplash

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

Author:
Mike Varen

1 year ago

3.6k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

16.4k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

118
Feature showcase with images

Author:
Amit Pachange

2 years ago

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

Author:
Coastal UI

6 months ago

313
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

7 months ago

1.4k
Feature Cards Section
showcase key features or benefits with cards.

Author:
Anonymous

1 year ago

3.8k
Feature Showcase
Showcase Features of your product

Author:
Prashant

3 years ago

11.2k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

666
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.4k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

1 year ago

7.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components