Separator

<div>
    <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
        <p class="text-sm text-muted-foreground">
            Seamlessly integrate JavaScript tools into your application.
        </p>
    </div>
    <twig:Separator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
        <a href="https://ux.symfony.com/" target="_blank">Website</a>
        <twig:Separator orientation="vertical" />
        <a href="https://ux.symfony.com/documentation" target="_blank">Documentation</a>
        <twig:Separator orientation="vertical" />
        <a href="https://github.com/symfony/ux" target="_blank">Source</a>
    </div>
</div>

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

{# @prop orientation 'horizontal'|'vertical' The orientation of the separator, default to `horizontal` #}
{# @prop decorative boolean Whether the separator is decorative or not, default to `true` #}
{%- props orientation = 'horizontal', decorative = true -%}
{%- set style = html_cva(
    base: 'shrink-0 bg-border',
    variants: {
        orientation: {
            horizontal: 'h-[1px] w-full',
            vertical: 'h-full w-[1px]',
        },
    },
) -%}
<div
    class="{{ style.apply({orientation: orientation, decorative: decorative}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes.defaults({
        role: decorative ? 'none' : 'separator',
        'aria-orientation': decorative ? false : orientation,
    }) }}
></div>