1<!--
2 This example requires Tailwind CSS v2.0+
3
4 This example requires some changes to your config:
5
6 ```
7 // tailwind.config.js
8 module.exports = {
9 // ...
10 plugins: [
11 // ...
12 require('@tailwindcss/forms'),
13 ]
14 }
15 ```
16-->
17<div>
18 <label for="price" class="block text-sm font-medium text-gray-700">Price</label>
19 <div class="mt-1 relative rounded-md shadow-sm">
20 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
21 <span class="text-gray-500 sm:text-sm">
22 $
23 </span>
24 </div>
25 <input type="text" name="price" id="price" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00">
26 <div class="absolute inset-y-0 right-0 flex items-center">
27 <label for="currency" class="sr-only">Currency</label>
28 <select id="Currency" name="currency" class="focus:ring-indigo-500 focus:border-indigo-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md">
29 <option>USD</option>
30 <option>CAD</option>
31 <option>EUR</option>
32 </select>
33 </div>
34 </div>
35</div>
36
1<section class="flex justify-center mt-10">
2 <input placeholder="Name"
3 class="border-2 transition duration-500 placeholder-red-400 focus:placeholder-transparent border-red-400 w-4/12 py-2 text-center text-red-400 bg-transparent rounded-md focus:outline-none ">
4</section>