Breaking News: Grepper is joining You.com. Read the official announcement!

glassmorphism code for login panel using tailwind css in react

Sushant Shrestha answered on June 30, 2023 Popularity 1/10 Helpfulness 1/10

answer glassmorphism code for login panel using tailwind css in react

glassmorphism code for login panel using tailwind css in react

Comment

import React from "react";

const LoginPanel = () => {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="w-72 p-8 bg-white rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20">
        <h2 className="text-2xl font-bold mb-6">Login</h2>
        <form>
          <div className="mb-4">
            <label htmlFor="username" className="block text-gray-300">
              Username
            </label>
            <input
              type="text"
              id="username"
              className="w-full px-3 py-2 bg-transparent border-b border-gray-300 focus:outline-none focus:border-gray-500"
              placeholder="Enter your username"
            />
          </div>
          <div className="mb-6">
            <label htmlFor="password" className="block text-gray-300">
              Password
            </label>
            <input
              type="password"
              id="password"
              className="w-full px-3 py-2 bg-transparent border-b border-gray-300 focus:outline-none focus:border-gray-500"
              placeholder="Enter your password"
            />
          </div>
          <button
            type="submit"
            className="w-full py-2 px-4 bg-blue-500 text-white font-bold rounded hover:bg-blue-600 focus:outline-none"
          >
            Log in
          </button>
        </form>
      </div>
    </div>
  );
};

export default LoginPanel;

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: chat.openai.com

Tags: panel tailwind-css using whatever

Link to this answer
Share Copy Link

Contributed on Jun 30 2023

Sushant Shrestha

0 Answers Avg Quality 2/10

glassmorphism code for login panel using tailwind css in react

Contents

More Related Answers

glassmorphism code for login panel using tailwind css in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.