---
sidebar_position: 2
---

# Vertical Tabs Feature

![Cards](/img/vertical-tabs-feature.png)

```jsx title="Frontend/sections/Features/VerticalTabsFeature.tsx"
const [tab, setTab] = useState("1");
return (
  <>
      {/* Features */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <div className="relative p-6 md:p-16">
          {/* Grid */}
          <div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
            <div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
              <h2 className="text-2xl text-secondary-content font-bold sm:text-3xl ">
                Save 20+ hours of app development with FastPocket
              </h2>
              {/* Tab Navs */}
              <nav
                className="grid gap-4 mt-5 md:mt-10"
                aria-label="Tabs"
                role="tablist"
              >
                <button
                  type="button"
                  className={`hover:bg-base-content/5 ${
                    tab === "1" && "bg-base-300 shadow-lg hover:bg-base-300"
                  } text-start p-4 md:p-5 rounded-xl`}
                  id="tabs-with-card-item-1"
                  aria-controls="tabs-with-card-1"
                  role="tab"
                  onClick={() => setTab("1")}
                >
                  <span className="flex">
                    <svg
                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content  "
                      xmlns="http://www.w3.org/2000/svg"
                      width={24}
                      height={24}
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
                      <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
                      <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
                      <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
                      <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
                    </svg>
                    <span className="grow ms-6">
                      <span className="block text-lg font-semibold text-secondary-content  ">
                        Simple Setup
                      </span>
                      <span className="block mt-1 text-secondary-content ">
                        FastPocket already has a codebase with all of the
                        necessary integrations to start an online business out
                        of the box AND excellent documentation
                      </span>
                    </span>
                  </span>
                </button>
                <button
                  type="button"
                  className={`hover:bg-base-content/5 ${
                    tab === "2" && "bg-base-300 shadow-lg hover:bg-base-300"
                  } text-start p-4 md:p-5 rounded-xl     `}
                  id="tabs-with-card-item-2"
                  aria-controls="tabs-with-card-2"
                  role="tab"
                  onClick={() => setTab("2")}
                >
                  <span className="flex">
                    <svg
                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content  "
                      xmlns="http://www.w3.org/2000/svg"
                      width={24}
                      height={24}
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="m12 14 4-4" />
                      <path d="M3.34 19a10 10 0 1 1 17.32 0" />
                    </svg>
                    <span className="grow ms-6">
                      <span className="block text-lg font-semibold text-secondary-content  ">
                        Copy Paste Components
                      </span>
                      <span className="block mt-1 text-secondary-content ">
                        We give you cookie cutter copy paste setup for your SaaS
                        with unopinionated SaaS styling that can be modified to
                        suite whatever app you are building
                      </span>
                    </span>
                  </span>
                </button>
                <button
                  type="button"
                  className={`hover:bg-base-content/5 ${
                    tab === "3" && "bg-base-300 shadow-lg hover:bg-base-300"
                  } text-start p-4 md:p-5 rounded-xl     `}
                  id="tabs-with-card-item-3"
                  aria-controls="tabs-with-card-3"
                  role="tab"
                  onClick={() => setTab("3")}
                >
                  <span className="flex">
                    <svg
                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content  "
                      xmlns="http://www.w3.org/2000/svg"
                      width={24}
                      height={24}
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
                      <path d="M5 3v4" />
                      <path d="M19 17v4" />
                      <path d="M3 5h4" />
                      <path d="M17 19h4" />
                    </svg>
                    <span className="grow ms-6">
                      <span className="block text-lg font-semibold text-secondary-content  ">
                        Simple Bring Your Own Backend
                      </span>
                      <span className="block mt-1 text-secondary-content ">
                        We offer deployment templates that allow you to deploy
                        to Digital Ocean, Fly.io, Pockethost or any other
                        backend you want to use. You have the control over your
                        hosting
                      </span>
                    </span>
                  </span>
                </button>
              </nav>
              {/* End Tab Navs */}
            </div>
            {/* End Col */}
            <div className="lg:col-span-6">
              <div className="relative">
                {/* Tab Content */}
                <div>
                  {tab == "1" && (
                    <div
                      id="tabs-with-card-1"
                      role="tabpanel"
                      aria-labelledby="tabs-with-card-item-1"
                    >
                      <Image
                        className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
                        src="/images/vertical-tabs-feature-1.png"
                        alt="Image Description"
                        width="987"
                        height="1220"
                      />
                    </div>
                  )}
                  {tab == "2" && (
                    <div
                      id="tabs-with-card-2"
                      role="tabpanel"
                      aria-labelledby="tabs-with-card-item-2"
                    >
                      <Image
                        className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
                        src="/images/vertical-tabs-feature-2.png"
                        alt="Image Description"
                        width="987"
                        height="1220"
                      />
                    </div>
                  )}
                  {tab == "3" && (
                    <div
                      id="tabs-with-card-3"
                      role="tabpanel"
                      aria-labelledby="tabs-with-card-item-3"
                    >
                      <Image
                        className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
                        src="/images/vertical-tabs-feature-3.png"
                        alt="Image Description"
                        width="987"
                        height="1220"
                      />
                    </div>
                  )}
                </div>
                {/* End Tab Content */}
                {/* SVG Element */}
                <div className="hidden absolute top-0 end-0 translate-x-20 md:block lg:translate-x-20">
                  <svg
                    className="w-16 h-auto text-secondary"
                    width={121}
                    height={135}
                    viewBox="0 0 121 135"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
                      stroke="currentColor"
                      strokeWidth={10}
                      strokeLinecap="round"
                    />
                    <path
                      d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
                      stroke="currentColor"
                      strokeWidth={10}
                      strokeLinecap="round"
                    />
                    <path
                      d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
                      stroke="currentColor"
                      strokeWidth={10}
                      strokeLinecap="round"
                    />
                  </svg>
                </div>
                {/* End SVG Element */}
              </div>
            </div>
            {/* End Col */}
          </div>
          {/* End Grid */}
          {/* Background Color */}
          <div className="absolute inset-0 grid grid-cols-12 size-full">
            <div className="col-span-full lg:col-span-7 lg:col-start-6 bg-base-300 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full" />
          </div>
          {/* End Background Color */}
        </div>
      </div>
      {/* End Features */}
    </>
);
```