Tailwind show placeholder on border of input when focused - css

Question

I am trying to create a form using Tailwind for a project. For this project I need to create a certain type of input field. When this field is being focused the placeholder of that field should change position on top of the border of the input. Is this possible using Tailwind?
This is my code for the input I am using:
<input
type="text"
name="email"
id="email"
v-model="email"
placeholder="Email address"
class="my-2 px-4 py-2 border rounded-lg text-gray-700 focus:outline-none text-sm"
/>
This is an example of how to input should be displayed when it is being focused:

Answer 1

You can use :
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-[11px] text-gray-900 dark:text-gray-300
bg-white relative px-1 top-2 left-3 w-auto group-focus-within:text-red-600 ">
Email Address
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
Or
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-11 text-gray-900 dark:text-gray-300
bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600 ">
Email Address
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-[11px]text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
#tailwind base;
#tailwind components;
#tailwind utilities;
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.0.23"></script>
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-11 text-gray-900 dark:text-gray-300 bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600"> Email Address </label>
<input type="email" name="first_name" id="first_name" class="h-8 text-[11px]text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
</div>
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-[11px] text-gray-900 dark:text-gray-300 bg-white relative px-1 top-2 left-3 w-auto group-focus-within:text-red-600"> Email Address </label>
<input type="email" name="first_name" id="first_name" class="h-8 text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
</div>