edge-components

Login 

<div class="hero min-h-screen bg-base-200">
    <div class="hero-content text-center">
        <div class="card lg:card-side bg-base-100 shadow-xl">
            <figure><img src="https://picsum.photos/500/500" class="h-full lg:!max-w-fit" alt="" /></figure>
            <div class="card-body">

                <form method="POST">

                    <div class="alert alert-error">
                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div>
                            <ul>
                                <li> sampleError: This field is required </li>
                                <li> sample2Error: This field is required </li>
                            </ul>
                        </div>
                    </div>

                    <div class="form-control mb-5">
                        <label class="label cursor-pointer" for="email">
                            <span class="label-text">
                                Email:</span>
                        </label>
                        <input type="text" class="input input-bordered" name="email" id="email" value="" />

                    </div>

                    <div class="form-control mb-5">
                        <label class="label cursor-pointer" for="password">
                            <span class="label-text">
                                Password:</span>
                        </label>
                        <input type="text" class="input input-bordered" name="password" id="password" value="" />

                    </div>

                    <div class="form-control mb-5">

                        <label class="label cursor-pointer">
                            <span class="label-text">
                                Remember me</span> <input type="checkbox" class="toggle" name="remember_me" id="remember_me" value="" />

                        </label>
                    </div>

                    <div class="form-control mb-5">

                        <input type="submit" class="btn btn-primary" value="Login" />

                    </div>

                </form>

            </div>

        </div>

    </div>
</div>
 
<div class="hero min-h-screen bg-base-200">
  <div class="hero-content text-center">

    @jrmc.card({ class: 'lg:card-side bg-base-100 shadow-xl' })
      @slot('top')
        <figure><img src="https://picsum.photos/500/500" class="h-full lg:!max-w-fit" alt="" /></figure>
      @end
      @jrmc.card.body()
        @jrmc.form({ csrf: false })
          @jrmc.form.control({ name: 'email', error: false })
            @!jrmc.form.input({ class: 'input-bordered' })
          @end

          @jrmc.form.control({ name: 'password', error: false })
            @!jrmc.form.input({ class: 'input-bordered' })
          @end

          @jrmc.form.control({ name: 'remember_me', label: false })
            @jrmc.form.label({ class: 'cursor-pointer', text: 'Remember me' })
              @!jrmc.form.toggle()
            @end
          @end

          @jrmc.form.control({ label: false, error: false })
            @!jrmc.button.input({ text: 'Login', type: 'submit', class: 'btn-primary' })
          @end
        @end
      @end
    @end

  </div>
</div>

No notes defined.