<div class="form-floating mb-3">
                <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                <label for="floatingInput">Email address</label>
            </div>
            
            <div class="form-floating">
                <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
            </div>
            
            <div class="form-floating">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
                <label for="floatingTextarea">Comments</label>
            </div>
            
            <div class="form-floating">
                <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
                    <option selected>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
                <label for="floatingSelect">Works with selects</label>
            </div>
            

            <form class="form-floating">
                <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
                <label for="floatingInputValue">Input with value</label>
            </form>
            

            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
                <label for="floatingInputDisabled">Email address</label>
            </div>
            
            <div class="form-floating mb-3">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
                <label for="floatingTextareaDisabled">Comments</label>
            </div>
            
            <div class="form-floating mb-3">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled>Disabled textarea with some text inside</textarea>
                <label for="floatingTextarea2Disabled">Comments</label>
            </div>
            
            <div class="form-floating">
                <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
                    <option selected>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
                <label for="floatingSelectDisabled">Works with selects</label>
            </div>
            

            <div class="form-floating mb-3">
                <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
                <label for="floatingEmptyPlaintextInput">Empty input</label>
            </div>
            
            <div class="form-floating mb-3">
                <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
                <label for="floatingPlaintextInput">Input with value</label>
            </div>
            

            <div class="input-group">
                <span class="input-group-text">@</span>
                <div class="form-floating">
                    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
                    <label for="floatingInputGroup1">Username</label>
                </div>
            </div>