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

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