kinetic-2.0.x-dev/templates/paragraph/tab/paragraph--tab.html.twig

{# template override for Tab Content #}

{% set tab_item_content %}
  <div class="relative group cursor-pointer rounded-lg overflow-hidden">
    <div class="bg-black bottom-4 left-4 p-4 lg:bg-black/48 backdrop-blur-md lg:absolute lg:rounded-lg lg:w-[80%] 2xl:w-[342px]">
      <h4 class="h4 !text-white inline-block transition-[border] border-b-1 border-transparent group-hover:border-[currentColor]"> {{ content.field_heading }}</h4>
      <p class="!text-white"> {{ content.field_description }}</p>
      <span role="link" data-href={{ content.field_link[0]['#url'] }} class="btn-quaternary mt-6 group-hover:gap-3" aria-label="{{ content.field_heading[0] }}">
        Learn More
      </span>
    </div>
    <a aria-hidden='true' href={{ content.field_link[0]['#url'] }} class="absolute inset-0" title="{{ content.field_heading[0] }}"></a>
  </div>
{% endset %}

{{ include('kinetic:tabs-item', {
  tab_content: tab_item_content
}, with_context: false) }}