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

Feature showcase cards

Author:
bara masalma

9 months ago

958
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.1k
Feature tiles

Author:
Nishant Trivedi

2 years ago

13.7k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

9k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

7 months ago

1.5k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

1 year ago

2.3k
Feature, Showcase

Author:
Matti

8 months ago

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

Author:
Nikita

1 year ago

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

Author:
Mike Varen

1 year ago

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

Author:
Akram Khan

1 year ago

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

Author:
kzsamir849

1 year ago

1.7k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components