Skip to main content

As Seen On Component

  • layout for adding a 'As Seen On' banner for your application
  • Not if you opt to use Image instead of img, you need to specify the url in next.config.js
  • Be sure to change the hrefs below

Code​

<section>
  <div className="flex p-2 items-center justify-center font-bold">
    As Seen On:
  </div>
  <div className="flex p-2 items-center justify-center">
    <a
      href="https://www.producthunt.com/products/coloring-pages-pro/reviews?utm_source=badge-product_review&utm_medium=badge&utm_souce=badge-coloring&#0045;pages&#0045;pro"
      target="_blank"
    >
      <img
        src="https://api.producthunt.com/widgets/embed-image/v1/product_review.svg?product_id=577378&theme=light"
        alt="Coloring&#0032;Pages&#0032;Pro - Stop&#0032;looking&#0032;for&#0032;the&#0032;perfect&#0032;coloring&#0032;page&#0046;&#0032;Create&#0032;your&#0032;own&#0046; | Product Hunt"
        className="h-12 p-1"
      />
    </a>
    <a href="https://topai.tools/t/coloring-pages-pro?ref=embed">
      <img
        src="https://topai.tools/assets/img/topai.tools.gif"
        className="h-12 p-1"
        alt="Coloring Pages Pro Featured on topAI.tools"
      />
    </a>
    <a
      href="https://www.toolify.ai/tool/coloring-pages-pro/?ref=embed"
      target="_blank"
    >
      <img
        src="https://cdn.toolify.ai/featured_light.svg"
        className="h-12 p-1"
        alt="Coloring Pages Pro : Reviews, Pricing, Core features, Use cases, Coloring Pages Pro alternatives | Toolify"
      />
    </a>
  </div>
</section>