_input.scss

.input {
    @apply bg-white rounded-lg w-full max-w-lg px-6 border border-gray-300 py-3 mt-2;

    &::placeholder {
        @apply text-gray-dark;
    }

    &:focus {
        @apply border-opacity-0 outline-none shadow-outline-blue;
    }
}

credit-card.blade.php

<div class="form-group" x-data="{ digits: '', date: '', cvc: '', isFocused: false }">

    <span>{{ $name }}</span>

    <div class="max-w-lg flex rounded-lg mt-2 border border-gray-300" @click.away="isFocused = false"
         :class="isFocused ? 'border-opacity-0 shadow-outline' : ''">
        <input @focus="isFocused = true" class="input border-none rounded-r-none min-w-0 w-full mt-0 focus:shadow-none"
               type="text" placeholder="Card Number"
               x-model="digits"
               required
               name="digits"
               x-on:input="digits = $event.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim().slice(0, 19); if (digits.length === 19) $refs.date.focus()"/>
        <input @focus="isFocused = true"
               x-ref="date"
               x-model="date"
               required
               x-on:input="date = $event.target.value.replace(/[^0-9 \/]/g, ''); if (date.length === 2) date += ' / ' ; if (date.length === 4 + 3) $refs.cvc.focus()"
               name="date"
               class="input border-none rounded-l-none rounded-r-none flex-grow-0 focus:shadow-none w-full mt-0 flex-1"
               type="text" placeholder="MM / YY"                style="min-width: 9rem" />
        <input @focus="isFocused = true" class="input border-none rounded-l-none min-w-0 mt-0 focus:shadow-none flex-1"
               required
               x-ref="cvc" x-model="cvc"
               name="cvc"
               style="min-width: 7rem"
               maxlength="3" type="text" placeholder="CVC"/>
    </div>

    @error(Str::slug($name))
    <div role="alert" class="text-error-500 mt-1">{{ $message }}</div>
    @enderror
</div>