eliashaeussler/typo3-badges

<div class="{% if showCopyButton %}group{% endif %} bg-gray-700 rounded-md mt-2 text-sm text-white relative shadow selection:bg-gray-500 selection:text-current">
    {% if showCopyButton %}
        <button class="clipboard-btn js-hidden absolute top-2 right-2 shadow-md border border-gray-100 text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-orange-300 font-medium rounded-md text-sm p-2 bg-white no-touch:opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition" title="Copy to clipboard" type="button">
            <svg class="clipboard-copy w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
            <svg class="clipboard-check w-4 h-4 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
        </button>
    {% endif %}
    <pre class="{% if showCopyButton %}clipboard-text{% endif %} block px-4 md:px-6 py-4 overflow-x-auto break-normal"><code>{% apply spaceless %}
{% block content %}{% endblock %}
    {% endapply %}</code></pre>
</div>