How to make Transparent Input Field on a Transparent Div in Tailwind CSS ?

Last Updated : 11 Mar, 2024

To make an HTML input field transparent on a transparent div using Tailwind CSS, apply the bg-transparent class to both the input field and the div. This ensures that the background of both elements is transparent, allowing the underlying content or background to show through.

Syntax:

<div class="bg-transparent">
  <input type="text" class="bg-transparent">
</div>

Example 1: Implementation to set input field transparent.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Transparent Input Field on Transparent Div</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100">
    <div class="bg-transparent h-screen 
                flex flex-col justify-center items-center">
        <h1 class="text-center text-green-600 mb-8">
              GeeksforGeeks
          </h1>
        <input type="text"
            class="bg-transparent border border-blue-500 
                   rounded-md py-2 px-4 focus:outline-none 
                   focus:border-blue-700">
    </div>
</body>
 
</html>

Output:

Screenshot-2024-02-29-113859

Example 2: This example shows the Transparent Input Field on a Transparent Div in Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Transparent Input Field on Transparent Div</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100">
    <div class="bg-transparent h-screen 
                flex flex-col justify-center items-center">
        <h1 class="text-center text-green-600 mb-8">
              GeeksforGeeks
          </h1>
        <div class="bg-white shadow-md rounded-md p-4 w-80">
            <input type="text"
                   class="bg-transparent border-none 
                          w-full focus:outline-none"
                   placeholder="Enter your email">
            <button class="bg-blue-300 text-white py-1 px-4 
                           rounded-md mt-4 w-full hover:bg-green-400">
                  Submit
              </button>
        </div>
    </div>
</body>
 
</html>