<pclass="text-gray-500">Pines, is super easy to use. If your application uses Alpine and Tailwind, you can copy and paste an element into your page and it will work flawlessly. If you want to test an element on a single HTML page, you can copy/paste this snippet below into any `.html` file:</p>
<h5class="mb-1 font-medium leading-none tracking-tight">Use in Production</h5>
<divclass="text-sm [&;_p]:leading-relaxed">The snippet below uses the TailwindCDN which should not be used in your production apps, instead you should bundle Tailwind and Alpine with a <ahref="https://tailwindcss.com/docs/guides/vite"target="_blank"class="underline">bundler like Vite</a>.</div>
<divclass="text-sm [&_p]:leading-relaxed opacity-80">Replace the `<!-- Element Here -->` line with the element snippet and you're ready to rock and roll.</div>
<pclass="text-gray-500">You may also open up the <buttonclass="text-blue-600 underline"onclick="window.dispatchEvent(new CustomEvent('open-playground', { detail: {}}));">Pines Playground</button> and edit any element or design your own. Keep in mind that the data entered into the playground will not be saved, so if you leave the page you may lose any changes. However, it may be the easiest way to make a few modifications to an element or create your own.</p>
<pclass="text-gray-500">Pines isn't a standalone library, but rather a collection of elements for Alpine and Tailwind projects. This will make it a delight to integrate with your <ahref="https://tallstack.dev"target="_blank">TALL stack applications</a>; however, some of these elements you may want to make re-usable. One such element is the tooltip element, which you may want to extract it into it's own Alpine plugin, allowing you to do something like this:</p>
<divclass="text-sm [&_p]:leading-relaxed">By doing this, you can include multiple tooltips in your application and modify the appearance and functionionality in one place.</div>
