<div class="flex flex-row gap-x-4">
    <button class="inline-flex items-center justify-center gap-x-2 border-gray-400 border-b-4 bg-gray-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-gray-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
    <button class="inline-flex items-center justify-center gap-x-2 border-red-400 border-b-4 bg-red-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-red-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
    <button class="inline-flex items-center justify-center gap-x-2 border-yellow-400 border-b-4 bg-yellow-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-yellow-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
    <button class="inline-flex items-center justify-center gap-x-2 border-green-400 border-b-4 bg-green-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-green-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
    <button class="inline-flex items-center justify-center gap-x-2 border-blue-400 border-b-4 bg-blue-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-blue-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
    <button class="inline-flex items-center justify-center gap-x-2 border-indigo-400 border-b-4 bg-indigo-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-indigo-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
    <button class="inline-flex items-center justify-center gap-x-2 border-purple-400 border-b-4 bg-purple-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-purple-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
    <button class="inline-flex items-center justify-center gap-x-2 border-pink-400 border-b-4 bg-pink-100 text-sm font-semibold text-black/80 px-4 py-2 rounded-lg hover:border-pink-500 hover:border-b-6 hover:-translate-y-1 transition-all duration-300">Button</button>
</div>
    

        <div class="flex flex-row gap-x-4">
    <button class=" bg-gray-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-gray-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-700 hover:text-gray-100 transition-all duration-700">Hover Me</button>
    <button class=" bg-red-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-red-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-1000 hover:text-red-100 transition-all duration-1000">Hover Me</button>
    <button class=" bg-yellow-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-yellow-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-1000 hover:text-yellow-100 transition-all duration-1000">Hover Me</button>
    <button class=" bg-green-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-green-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-1000 hover:text-green-100 transition-all duration-1000">Hover Me</button>
    <button class=" bg-blue-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-blue-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-1000 hover:text-blue-100 transition-all duration-1000">Hover Me</button>
    <button class=" bg-indigo-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-indigo-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-1000 hover:text-indigo-100 transition-all duration-1000">Hover Me</button>
    <button class=" bg-purple-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-purple-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-1000 hover:text-purple-100 transition-all duration-1000">Hover Me</button>
    <button class=" bg-pink-200 text-md font-bold border-none text-black/80 relative px-4 z-30 py-2 rounded-lg after:-z-20 after:absolute after:size-1 after:bg-pink-500 overflow-hidden after:left-2 after:bottom-0 after:translate-y-full after:rounded-lg after:hover:scale-[300] after:hover:transition-all after:hover:duration-1000 after:transition-all after:duration-1000 hover:text-pink-100 transition-all duration-1000">Hover Me</button>
</div>
    

        <div class="flex flex-row gap-x-4">
    <button class="inline-flex items-center justify-center gap-x-2 border-none bg-gray-100 text-sm font-medium text-black/80 px-4 py-2 rounded-lg hover:bg-gray-200 transition duration-300">
        <svg width="256" height="262" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg> 
        Continue with Google
    </button>
    <button class="inline-flex items-center justify-center gap-x-2 border-none bg-blue-600 text-sm font-medium text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
        <svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="#ffffff"><path d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z"></path></svg>
        Login with Facebook
    </button>
    <button class="inline-flex items-center justify-center gap-x-2 border-none bg-black text-sm font-medium text-white/80 px-4 py-2 rounded-lg">
        <svg viewBox="0 0 256 250" width="256" height="250" fill="#fff" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" /></svg> 
        Login with GitHub
    </button>
</div>
    

        <div class="flex flex-row gap-x-4">
    <button class="inline-flex items-center justify-center border-none bg-gray-100 px-10 py-4 rounded-lg hover:bg-gray-200 transition duration-300">
        <svg width="256" height="262" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
    </button>
    <button class="inline-flex items-center justify-center border-none bg-blue-500 px-10 py-4 rounded-lg hover:bg-blue-700 transition duration-300">
        <svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="#ffffff"><path d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z"></path></svg>
    </button>
    <button class="inline-flex items-center justify-center border-none bg-gray-100 px-10 py-4 rounded-lg hover:bg-gray-200 transition duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="209" height="256" viewBox="0 0 814 1000"><path fill="#000" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg>
    </button>
    <button class="inline-flex items-center justify-center border-none bg-[#107c10] px-10 py-4 rounded-lg hover:bg-[#106c00] transition duration-300">
        <svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" width="88" height="88"><title>Xbox Logo</title><path fill="#fff" d="M39.73 86.91c-6.628-.635-13.338-3.015-19.102-6.776-4.83-3.15-5.92-4.447-5.92-7.032 0-5.193 5.71-14.29 15.48-24.658 5.547-5.89 13.275-12.79 14.11-12.604 1.626.363 14.616 13.034 19.48 19 7.69 9.43 11.224 17.154 9.428 20.597-1.365 2.617-9.837 7.733-16.06 9.698-5.13 1.62-11.867 2.306-17.416 1.775zM8.184 67.703c-4.014-6.158-6.042-12.22-7.02-20.988-.324-2.895-.21-4.55.733-10.494 1.173-7.4 5.39-15.97 10.46-21.24 2.158-2.24 2.35-2.3 4.982-1.41 3.19 1.08 6.6 3.436 11.89 8.22l3.09 2.794-1.69 2.07c-7.828 9.61-16.09 23.24-19.2 31.67-1.69 4.58-2.37 9.18-1.64 11.095.49 1.294.04.812-1.61-1.714zm70.453 1.047c.397-1.936-.105-5.49-1.28-9.076-2.545-7.765-11.054-22.21-18.867-32.032l-2.46-3.092 2.662-2.443c3.474-3.19 5.886-5.1 8.49-6.723 2.053-1.28 4.988-2.413 6.25-2.413.777 0 3.516 2.85 5.726 5.95 3.424 4.8 5.942 10.63 7.218 16.69.825 3.92.894 12.3.133 16.21-.63 3.208-1.95 7.366-3.23 10.187-.97 2.113-3.36 6.218-4.41 7.554-.54.687-.54.686-.24-.796zM40.44 11.505C36.834 9.675 31.272 7.71 28.2 7.18c-1.076-.185-2.913-.29-4.08-.23-2.536.128-2.423-.004 1.643-1.925 3.38-1.597 6.2-2.536 10.03-3.34C40.098.78 48.193.77 52.43 1.663c4.575.965 9.964 2.97 13 4.84l.904.554-2.07-.104C60.148 6.745 54.15 8.408 47.71 11.54c-1.942.946-3.63 1.7-3.754 1.68-.123-.024-1.706-.795-3.52-1.715z"/></svg>
    </button>
    <button class="inline-flex items-center justify-center border-none bg-blue-600 px-10 py-4 rounded-lg hover:bg-blue-800 transition duration-300">
        <?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 95.18" style="enable-background:new 0 0 122.88 95.18" xml:space="preserve"><style type="text/css"><![CDATA[.st0{fill:#ffffff;}]]></style><g><path class="st0" d="M2.49,69.39c-4.61,3.07-3.07,8.9,6.75,11.67c10.13,3.38,21.18,4.3,31.93,2.46c0.61,0,1.23-0.31,1.54-0.31 V72.76l-10.44,3.38c-3.99,1.23-7.98,1.54-11.97,0.61c-3.07-0.92-2.46-2.76,1.23-4.3l21.18-7.37V53.73L13.23,63.86 C9.55,65.09,5.86,66.93,2.49,69.39L2.49,69.39z M73.71,23.33v29.78c12.59,6.14,22.41,0,22.41-15.96c0-16.27-5.83-23.64-22.72-29.47 C64.5,4.6,55.29,1.84,46.08,0v88.73l21.49,6.45V20.57c0-3.38,0-5.83,2.46-4.91C73.41,16.58,73.71,19.96,73.71,23.33L73.71,23.33z M113.63,62.32c-8.9-3.07-18.42-4.3-27.63-3.38c-4.91,0.31-9.52,1.54-13.82,3.07l-0.92,0.31V74.3l19.96-7.37 c3.99-1.23,7.98-1.54,11.97-0.61c3.07,0.92,2.46,2.76-1.23,4.3l-30.7,11.36v11.67l42.37-15.66c3.07-1.23,5.83-2.76,8.29-5.22 C124.07,69.69,123.15,65.39,113.63,62.32L113.63,62.32z"/></g></svg>
    </button>
    <button class="inline-flex items-center justify-center border-none bg-blue-900 px-10 py-4 rounded-lg hover:bg-blue-950 transition duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 65 65" fill="#fff"><use xlink:href="#B" x=".5" y=".5"/><defs><linearGradient id="A" x2="50%" x1="50%" y2="100%" y1="0%"><stop stop-color="#111d2e" offset="0%"/><stop stop-color="#051839" offset="21.2%"/><stop stop-color="#0a1b48" offset="40.7%"/><stop stop-color="#132e62" offset="58.1%"/><stop stop-color="#144b7e" offset="73.8%"/><stop stop-color="#136497" offset="87.3%"/><stop stop-color="#1387b8" offset="100%"/></linearGradient></defs><symbol id="B"><g><path d="M1.305 41.202C5.259 54.386 17.488 64 31.959 64c17.673 0 32-14.327 32-32s-14.327-32-32-32C15.001 0 1.124 13.193.028 29.874c2.074 3.477 2.879 5.628 1.275 11.328z" fill="url(#A)"/><path d="M30.31 23.985l.003.158-7.83 11.375c-1.268-.058-2.54.165-3.748.662a8.14 8.14 0 0 0-1.498.8L.042 29.893s-.398 6.546 1.26 11.424l12.156 5.016c.6 2.728 2.48 5.12 5.242 6.27a8.88 8.88 0 0 0 11.603-4.782 8.89 8.89 0 0 0 .684-3.656L42.18 36.16l.275.005c6.705 0 12.155-5.466 12.155-12.18s-5.44-12.16-12.155-12.174c-6.702 0-12.155 5.46-12.155 12.174zm-1.88 23.05c-1.454 3.5-5.466 5.147-8.953 3.694a6.84 6.84 0 0 1-3.524-3.362l3.957 1.64a5.04 5.04 0 0 0 6.591-2.719 5.05 5.05 0 0 0-2.715-6.601l-4.1-1.695c1.578-.6 3.372-.62 5.05.077 1.7.703 3 2.027 3.696 3.72s.692 3.56-.01 5.246M42.466 32.1a8.12 8.12 0 0 1-8.098-8.113 8.12 8.12 0 0 1 8.098-8.111 8.12 8.12 0 0 1 8.1 8.111 8.12 8.12 0 0 1-8.1 8.113m-6.068-8.126a6.09 6.09 0 0 1 6.08-6.095c3.355 0 6.084 2.73 6.084 6.095a6.09 6.09 0 0 1-6.084 6.093 6.09 6.09 0 0 1-6.081-6.093z"/></g></symbol></svg>
    </button>
</div>