Developer-Friendly Tailwind Marketing Components

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>

Tabs

View

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

Accordion

View

<div x-data="{ openSection: null }" class="space-y-4">
  <div class="border rounded">
    <button @click="openSection = openSection === 1 ? null : 1" class="w-full text-left px-4 py-2 focus:outline-none focus:ring">
      <h2 class="font-semibold">Section 1</h2>
    </button>
    <div x-show="openSection === 1" class="px-4 py-2">
      <p class="text-black">Content for section 1 goes here. This can be any content you want to hide or show on demand.</p>
    </div>
  </div>
  <div class="border rounded">
    <button @click="openSection = openSection === 2 ? null : 2" class="w-full text-left px-4 py-2 focus:outline-none focus:ring">
      <h2 class="font-semibold">Section 2</h2>
    </button>
    <div x-show="openSection === 2" class="px-4 py-2">
      <p class="text-black">Content for section 2 goes here. It also can contain any kind of information you wish to reveal.</p>
    </div>
  </div>
  <div class="border rounded">
    <button @click="openSection = openSection === 3 ? null : 3" class="w-full text-left px-4 py-2 focus:outline-none focus:ring">
      <h2 class="font-semibold">Section 3</h2>
    </button>
    <div x-show="openSection === 3" class="px-4 py-2">
      <p class="text-black">Content for section 3. Keep these sections concise and relevant to improve user experience.</p>
    </div>
  </div>
</div>

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