How to make Transparent Input Field on a Transparent Div in Tailwind CSS ?
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" > w3wiki </ 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:
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" > w3wiki </ 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 > |
Output:
Contact Us