<!-- component -->
<style>
    
</style>
<script src="https://cdn.tailwindcss.com"></script>

    <div
    style="gap:10px; background-color:rgb(188, 188, 111);" class="flex items-center justify-center h-screen">
            <div class="col">
                        <!-- Login Container -->
    <form action="{{ route('enter-login') }}" method="post">
        @csrf
        <div class="min-w-fit flex-col border bg-white px-12 py-16 shadow-md rounded-[4px] ">
        <div class="mb-4 flex justify-center">
            <img class="w-24" src="{{ asset('asset-modified/image/logo-usaha.jpg') }}" alt="" />
        </div>
        <div class="flex flex-col text-sm rounded-md">
            {{$errors->first('email')}}
            {{$errors->first('password')}}
            <input style="width: 22vw" name="email" class="mb-5 rounded-[4px] border p-3 hover:outline-none focus:outline-none hover:border-yellow-500 " type="text" placeholder="@gmail.com" />
            <input style="width: 22vw" name="password" class="border rounded-[4px] p-3 hover:outline-none focus:outline-none hover:border-yellow-500" type="password" placeholder="********" />
        </div>
        <button class="mt-5 w-full border p-2 bg-gradient-to-r from-gray-800 bg-gray-500 text-white rounded-[4px] hover:bg-slate-400 scale-105 duration-300" type="submit">Sign in</button>
        </div>
    </form>
            </div>
            <div 
            style="background-image:url('../asset-modified/image/bg-login-warung.png'); align-item:center;
                 background-repet:no-repeat;
                 background-size:cover;
                 background-position:center;
                 border-radius:10px;
                 height:100vh;
                 width:50vw;
                 padding:10rem;" class="col background-kasir ">
            </div>
    </div>
