Example of Blade components in tighten/onramp

<div class="mt-5">
    @isset($description)
        <p class="text-sm leading-5 text-gray-700 md:text-base">
            {{ $description }}
        </p>
    @endisset

    <div class="flex flex-wrap px-5 pb-2 mt-6 border border-gray-300 lg:flex-no-wrap md:px-8">
        {{ $slot }}
    </div>
</div>

@props([
    'name',
    'label',
    'value' => null,
    'type' => 'text',
])

<div class="flex-auto w-full my-5 lg:flex-even md:my-8">
    <label
        for="{{ $name }}"
        id="{{ $name }}-label"
        class="text-base font-medium text-gray-900"
    >
        {{ $label }}
    </label>

    <div class="relative max-w-xs mt-4">
        <input
            type="{{ $type }}"
            class="block w-full px-4 py-2 text-sm pr-8 leading-tight bg-white border border-gray-400 rounded shadow appearance-none hover:border-gray-500 focus:outline-none focus:shadow-outline{{ $errors->has($name) ? ' border-red-500' : '' }}"
            name="{{ $name }}"
            aria-labelledby="{{ $name }}-label"
            value="{{ old($name, $value) }}"
        >
    </div>

    @error($name)
        <p class="mt-2 text-xs italic text-red-500">
            {{ $errors->first($name) }}
        </p>
    @enderror
</div>

@props([
    'type' => 'submit',
])

<span class="inline-flex rounded-md shadow-sm">
    <button
        type="{{ $type }}"
        class="py-2 lg:text-lg button button-purple"
    >
        {{ $slot }}
    </button>
</span>

//
            <x-form.section>
                <x-input.text
                    name="name"
                    :label="__('Name')"
                    :value="auth()->user()->name"
                ></x-input.text>

                <x-input.text
                    name="email"
                    :label="__('Email')"
                    :value="auth()->user()->email"
                    type="email"
                ></x-input.text>
            </x-form.section>

            <div class="pt-5 mt-8">
                <div class="flex justify-start">
                    <x-button.primary>
                        {{ ucfirst(__('save')) }}
                    </x-button.primary>
                </div>
            </div>
//