JSFiddle - React, Tailwind, and code Playground

by ckissi

JavaScript

(function() {
    // Create a container for the widget
    var widgetContainer = document.createElement('div');
    widgetContainer.style.width = '300px';
    widgetContainer.style.height = '150px';
    widgetContainer.style.border = '1px solid #ccc';
    widgetContainer.style.padding = '10px';
    widgetContainer.style.backgroundColor = '#f9f9f9';
    widgetContainer.style.textAlign = 'center';
    widgetContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';

    // Create content inside the widget
    var widgetContent = document.createElement('div');
    widgetContent.innerHTML = '<h2>My Widget</h2><p>This is an embeddable widget!</p>';
    widgetContainer.appendChild(widgetContent);

    // Optionally, create a link or button
    var widgetLink = document.createElement('a');
    widgetLink.href = 'https://example.com';
    widgetLink.innerText = 'Learn More';
    widgetLink.style.display = 'inline-block';
    widgetLink.style.marginTop = '10px';
    widgetLink.style.padding = '8px 12px';
    widgetLink.style.backgroundColor = '#007bff';
    widgetLink.style.color = '#fff';
    widgetLink.style.textDecoration = 'none';
    widgetLink.style.borderRadius = '4px';

    widgetContainer.appendChild(widgetLink);

    // Insert the widget into the host page
    document.body.appendChild(widgetContainer);
})();