Pitchbooking Storybook
Ready for Production

← Back

Product Card

The ultimate booking and payment solution for sports facilities: Our platform provides a seamless online booking and payment system, along with intelligent availability configuration to boost efficiency and profitability.

Find out more

Code:

<section id="tab-mint-400" class="rounded-xl shadow-inner-lg bg-mint-400 bg-product-grid bg-left-bottom bg-no-repeat grid lg:grid-cols-2 md:space-x-2 overflow-hidden mb-14 ">
    <div class="pt-8 px-8 md:p-8 text-sm md:text-base flex flex-col justify-between">
      <p class="">The ultimate booking and payment solution for sports facilities: Our platform provides a seamless online booking and payment system, along with intelligent availability configuration to boost efficiency and profitability.</p>
      <a href="#" class="inline-flex items-center group pt-4 md:pt-8 font-bold">
        Find out more
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="ml-4 w-4 h-4 group-hover:scale-125 transition-all">
          <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
        </svg>
      </a>
    </div>
    <div class="pt-8 px-8 flex flex-col justify-between">
      <div></div> <!-- An empty div to push the image to the bottom -->
      <img class="lg:w-full w-[600px] drop-shadow-lg lg:-mb-1 sm:-mb-24 -mb-10 mx-auto" src="/assets/images/cards/product-card--screen.svg" alt="">
    </div>  
  </section>

  
  
  <section id="tab-orange-400" class="rounded-xl shadow-inner-lg bg-orange-400 bg-product-grid bg-left-bottom bg-no-repeat grid lg:grid-cols-2 md:space-x-2 overflow-hidden mb-14 hidden">
    <div class="pt-8 px-8 md:p-8 text-sm md:text-base flex flex-col justify-between">
      <p class="">The ultimate booking and payment solution for sports facilities: Our platform provides a seamless online booking and payment system, along with intelligent availability configuration to boost efficiency and profitability.</p>
      <a href="#" class="inline-flex items-center group pt-4 md:pt-8 font-bold">
        Find out more
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="ml-4 w-4 h-4 group-hover:scale-125 transition-all">
          <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
        </svg>
      </a>
    </div>
    <div class="pt-8 px-8 flex flex-col justify-between">
      <div></div> <!-- An empty div to push the image to the bottom -->
      <img class="lg:w-full w-[600px] drop-shadow-lg lg:-mb-1 sm:-mb-24 -mb-10 mx-auto" src="/assets/images/cards/product-card--screen.svg" alt="">
    </div>  
  </section>

  
  
  <section id="tab-fuchsia-400" class="rounded-xl shadow-inner-lg bg-fuchsia-400 bg-product-grid bg-left-bottom bg-no-repeat grid lg:grid-cols-2 md:space-x-2 overflow-hidden mb-14 hidden">
    <div class="pt-8 px-8 md:p-8 text-sm md:text-base flex flex-col justify-between">
      <p class="">The ultimate booking and payment solution for sports facilities: Our platform provides a seamless online booking and payment system, along with intelligent availability configuration to boost efficiency and profitability.</p>
      <a href="#" class="inline-flex items-center group pt-4 md:pt-8 font-bold">
        Find out more
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="ml-4 w-4 h-4 group-hover:scale-125 transition-all">
          <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
        </svg>
      </a>
    </div>
    <div class="pt-8 px-8 flex flex-col justify-between">
      <div></div> <!-- An empty div to push the image to the bottom -->
      <img class="lg:w-full w-[600px] drop-shadow-lg lg:-mb-1 sm:-mb-24 -mb-10 mx-auto" src="/assets/images/cards/product-card--screen.svg" alt="">
    </div>  
  </section>

  
  
  <section id="tab-cyan-400" class="rounded-xl shadow-inner-lg bg-cyan-400 bg-product-grid bg-left-bottom bg-no-repeat grid lg:grid-cols-2 md:space-x-2 overflow-hidden mb-14 hidden">
    <div class="pt-8 px-8 md:p-8 text-sm md:text-base flex flex-col justify-between">
      <p class="">The ultimate booking and payment solution for sports facilities: Our platform provides a seamless online booking and payment system, along with intelligent availability configuration to boost efficiency and profitability.</p>
      <a href="#" class="inline-flex items-center group pt-4 md:pt-8 font-bold">
        Find out more
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="ml-4 w-4 h-4 group-hover:scale-125 transition-all">
          <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
        </svg>
      </a>
    </div>
    <div class="pt-8 px-8 flex flex-col justify-between">
      <div></div> <!-- An empty div to push the image to the bottom -->
      <img class="lg:w-full w-[600px] drop-shadow-lg lg:-mb-1 sm:-mb-24 -mb-10 mx-auto" src="/assets/images/cards/product-card--screen.svg" alt="">
    </div>  
  </section>

  
  
  <section id="tab-lime-400" class="rounded-xl shadow-inner-lg bg-lime-400 bg-product-grid bg-left-bottom bg-no-repeat grid lg:grid-cols-2 md:space-x-2 overflow-hidden mb-14 hidden">
    <div class="pt-8 px-8 md:p-8 text-sm md:text-base flex flex-col justify-between">
      <p class="">The ultimate booking and payment solution for sports facilities: Our platform provides a seamless online booking and payment system, along with intelligent availability configuration to boost efficiency and profitability.</p>
      <a href="#" class="inline-flex items-center group pt-4 md:pt-8 font-bold">
        Find out more
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="ml-4 w-4 h-4 group-hover:scale-125 transition-all">
          <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
        </svg>
      </a>
    </div>
    <div class="pt-8 px-8 flex flex-col justify-between">
      <div></div> <!-- An empty div to push the image to the bottom -->
      <img class="lg:w-full w-[600px] drop-shadow-lg lg:-mb-1 sm:-mb-24 -mb-10 mx-auto" src="/assets/images/cards/product-card--screen.svg" alt="">
    </div>  
  </section>

  
  
  <section id="tab-violet-300" class="rounded-xl shadow-inner-lg bg-violet-300 bg-product-grid bg-left-bottom bg-no-repeat grid lg:grid-cols-2 md:space-x-2 overflow-hidden mb-14 hidden">
    <div class="pt-8 px-8 md:p-8 text-sm md:text-base flex flex-col justify-between">
      <p class="">The ultimate booking and payment solution for sports facilities: Our platform provides a seamless online booking and payment system, along with intelligent availability configuration to boost efficiency and profitability.</p>
      <a href="#" class="inline-flex items-center group pt-4 md:pt-8 font-bold">
        Find out more
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="ml-4 w-4 h-4 group-hover:scale-125 transition-all">
          <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
        </svg>
      </a>
    </div>
    <div class="pt-8 px-8 flex flex-col justify-between">
      <div></div> <!-- An empty div to push the image to the bottom -->
      <img class="lg:w-full w-[600px] drop-shadow-lg lg:-mb-1 sm:-mb-24 -mb-10 mx-auto" src="/assets/images/cards/product-card--screen.svg" alt="">
    </div>  
  </section>