<div class="inline-flex bg-gray-100 rounded border border-gray-200">
    <div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">@</div>
    <input type="text" placeholder="(ex. Ash, Cooper, Viper)" value="" class="bg-transparent border-transparent w-full py-1 text-gray-600 px-4 focus:outline-none" />
  </div>

  <div class="inline-flex justify-between bg-gray-100 rounded border border-gray-200">
    <input type="text" placeholder="(ex. mike)" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
    <div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">@gmail.com</div>
  </div>

  <div class="inline-flex justify-between bg-gray-100 rounded border border-gray-200">
    <div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">$</div>
    <input type="text" placeholder="10,000" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
    <div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">.00</div>
  </div>

  <div class="inline-flex justify-between bg-gray-100 rounded border border-gray-200">
    <input type="text" placeholder="your name" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
    <div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">@</div>
    <input type="text" placeholder="provider" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
    <div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">.com</div>
  </div>
                    
                

                    
                         <div class="inline-flex bg-gray-100 rounded border border-gray-200">
  <div class="inline bg-gray-200 py-2 px-4 text-gray-600">/</div>
  <input
    type="text"
    placeholder="(ex. https://goolge.com)"
    value="tailwindtemplates.io"
    class="bg-transparent border-transparent py-1 text-gray-600 px-4 focus:outline-none"
  />
</div>
                    
                

                    
                         <!-- Left -->
<div class="bg-gray-100 rounded border border-gray-200 flex items-center"><button class="py-2 px-4 bg-white text-gray-600 rounded-l border-r border-gray-200 hover:bg-gray-50 active:bg-gray-200 disabled:opacity-50 inline-flex items-center focus:outline-none">Search</button> <input type="text" placeholder="Your term..." class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none w-full" /></div>
<!-- Right -->
<div class="bg-gray-100 rounded border border-gray-200 flex items-center justify-between"><input type="text" placeholder="Email" value="jack@frontier.com" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none w-full" /> <button class="py-2 px-4 bg-white text-gray-600 rounded-r border-l border-gray-200 hover:bg-gray-50 active:bg-gray-200 disabled:opacity-50 inline-flex items-center focus:outline-none">Submit</button></div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-800 block mb-1 font-medium">
    Comments
  </label>
  <textarea
    rows="4"
    cols="50"
    name="input1"
    id="input1"
    value="testing"
    class="bg-gray-100 rounded border border-gray-200 py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700"
    placeholder="Enter your comment"
  ></textarea>
  <div class="flex items-center mt-1">
    <p class="text-xs text-gray-500">Help Message</p>
  </div>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-800 block mb-1 font-medium">
    Comments
  </label>
  <textarea
    rows="4"
    cols="50"
    name="input1"
    id="input1"
    value="testing"
    class="bg-gray-100 rounded border border-gray-200 py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700"
    placeholder="Enter your comment"
  ></textarea>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Password
  </label>
  <input
    type="password"
    name="input1"
    id="input1"
    value="testing"
    class="bg-red-50 border border-red-400 rounded py-1 px-3 block focus:ring-red-500 focus:border-red-500 text-gray-700"
    placeholder="Enter your password"
  />
  <div class="flex items-center mt-1 text-red-700">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z"
        clip-rule="evenodd"
      />
    </svg>
    <p class="ml-1 text-xs">Use atleast 1 number</p>
  </div>
  <p class="text-xs text-gray-500 mt-1">Use an uppercase letter and a number</p>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Password
  </label>
  <input
    type="password"
    name="input1"
    id="input1"
    value="testing"
    class="bg-red-50 border border-red-400 rounded py-1 px-3 block focus:ring-red-500 focus:border-red-500 text-gray-700"
    placeholder="Enter your password"
  />
  <div class="flex items-center mt-1 text-red-700">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z"
        clip-rule="evenodd"
      />
    </svg>
    <p class="ml-1 text-xs">Use atleast 1 number</p>
  </div>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Password
  </label>
  <input
    type="password"
    name="input1"
    id="input1"
    value="testing"
    class="bg-yellow-50 border border-yellow-400 rounded py-1 px-3 block focus:ring-yellow-500 focus:border-yellow-500 text-gray-700"
    placeholder="Enter your password"
  />
  <div class="flex items-center mt-1 text-yellow-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
</svg>
    <p class="ml-1 text-xs">Weak Password</p>
  </div>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Password
  </label>
  <input
    type="password"
    name="input1"
    id="input1"
    value="testing"
    class="bg-green-50 border border-green-400 rounded py-1 px-3 block focus:ring-green-500 focus:border-green-500 text-gray-700"
    placeholder="Enter your password"
  />
  <div class="flex items-center mt-1 text-green-700">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
        clip-rule="evenodd"
      />
    </svg>
    <p class="ml-1 text-xs">Secure Password</p>
  </div>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Name
  </label>
  <input type="text" name="input1" id="input1" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700" placeholder="Enter your name">
</div>