Developer-Friendly Tailwind Marketing Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Event Tracking

<div class="flex flex-col items-center justify-center space-y-4">
    <button data-click="trackClick" class="px-4 py-2 bg-blue-500 text-black text-center rounded-full">
        Track Button Click
    </button>
    <form data-submit="trackFormSubmission" class="flex flex-col items-start space-y-2">
        <label for="username" class="text-black">Username:</label>
        <input type="text" id="username" name="username" class="px-2 py-1 border border-gray-300 rounded-md">
        <button type="submit" class="px-4 py-2 bg-green-500 rounded-full text-black">
            Submit Form
        </button>
    </form>
</div>

function trackFormSubmission(event) {
        event.preventDefault();
        console.log('Form submitted:', event.target);
    }

document.querySelector('[data-click="trackClick"]').addEventListener('click', trackClick);
    document.querySelector('[data-submit="trackFormSubmission"]').addEventListener('submit', trackFormSubmission);
</script>

<js-component src="marketing/event_tracking"></js-component>

Conversion Tracking Pixel

View

<div class="p-4 bg-gray-100 rounded-lg">
    <h2 class="text-xl font-semibold mb-2">Conversion Tracking Pixel</h2>
    <p class="mb-4">Use the following code snippet to track user interactions and conversions on your site.</p>
    <pre class="bg-white p-3 rounded-md overflow-x-auto text-sm">
        <code class="text-black">&lt;!-- Conversion Tracking Pixel --&gt;
&lt;script&gt;
    // Example function to track a conversion
    function trackConversion(event) {
        console.log('Conversion tracked:', event);
        // Additional logic to send data to your analytics endpoint
    }
    
    // Track a click event on a button
    document.querySelector('#conversion-button').addEventListener('click', function(event) {
        trackConversion(event);
    });
&lt;/script&gt;
&lt;!-- Add this button to your HTML --&gt;
&lt;button id="conversion-button" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 transition duration-150 ease-in-out"&gt;
    Track Conversion
&lt;/button&gt;</code>
    </pre>
</div>

<js-component src="marketing/conversion_tracking_pixel"></js-component>