Log In
BASIC-LIBRARY / SECTION / FEATURE

Feature Eight

Preview Code
Quick edit
<section class="body-font text-gray-600 max-w-screen-2xl mr-auto ml-auto">
  <div
    class="container pl-5 pr-5 px-5 pt-24 pb-24 py-24 ml-auto mr-auto mx-auto"
  >
    <div class="text-center mb-20">
      <h1
        class="title-font text-2xl font-medium text-center text-gray-900 mb-4 sm:text-3xl"
      >
        Connected Tools for Scalable Growth
      </h1>
      <p
        class="text-base leading-relaxed ml-auto mr-auto mx-auto lg:w-3/4 xl:w-2/4"
      >
        Build, launch, and manage your digital products with a suite of
        collaborative tools designed for flexibility and performance at any
        scale.
      </p>
    </div>
    <div class="-m-4 flex flex-wrap">
      <div class="pt-4 pr-4 pb-4 pl-4 w-full sm:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 mb-4 text-sm text-center sm:text-left"
        >
          PROJECT DASHBOARD
        </h2>
        <nav
          class="-mb-1 space-y-2.5 flex flex-col text-center items-center sm:items-start sm:text-left"
        >
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Overview Metrics
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Task Progress
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Activity Log
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Member Access
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Notifications
            </span>
          </a>
        </nav>
      </div>
      <div class="pt-4 pr-4 pb-4 pl-4 w-full sm:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 mb-4 text-sm text-center sm:text-left"
        >
          DEVELOPMENT TOOLS
        </h2>
        <nav
          class="-mb-1 space-y-2.5 flex flex-col text-center items-center sm:items-start sm:text-left"
        >
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              API Explorer
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Code Samples
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              CLI Tools
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              SDK Downloads
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Release Notes
            </span>
          </a>
        </nav>
      </div>
      <div class="pt-4 pr-4 pb-4 pl-4 w-full sm:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 mb-4 text-sm text-center sm:text-left"
        >
          CUSTOMER SUCCESS
        </h2>
        <nav
          class="-mb-1 space-y-2.5 flex flex-col text-center items-center sm:items-start sm:text-left"
        >
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Support Center
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Knowledge Base
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Tutorials
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Customer Stories
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Submit a Ticket
            </span>
          </a>
        </nav>
      </div>
      <div class="pt-4 pr-4 pb-4 pl-4 w-full sm:w-1/2 lg:w-1/4">
        <h2
          class="title-font tracking-widest font-medium text-gray-900 mb-4 text-sm text-center sm:text-left"
        >
          COMPANY
        </h2>
        <nav
          class="-mb-1 space-y-2.5 flex flex-col text-center items-center sm:items-start sm:text-left"
        >
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              About Us
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Careers
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Press Kit
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Blog
            </span>
          </a>
          <a class>
            <span
              class="inline-flex bg-indigo-100 text-indigo-500 w-4 h-4 mr-2 rounded-full items-center justify-center"
            >
              <svg
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                class="w-3 h-3"
                viewBox="0 0 24 24"
              >
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </span>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Contact
            </span>
          </a>
        </nav>
      </div>
    </div>
    <button
      class="flex ml-auto mr-auto mx-auto mt-16 text-white bg-indigo-500 border-0 pt-2 pb-2 py-2 pl-8 pr-8 px-8 focus:outline-none rounded text-lg hover:bg-indigo-600"
    >
      Button
    </button>
  </div>
</section>
© 2025 tailsections.com. All rights reserved

Don’t Lose Your Edits!

Your changes are saved locally, but they may expire or be lost if you don’t create an account.

Create Account