<div class="relative">
<input class="appearance-none border-2 border-green-300 bg-green-50 hover:border-green-400 transition-colors rounded-md w-full py-2 px-3 text-gray-8w00 leading-tight focus:outline-none focus:ring-green-500 focus:border-green-500 focus:shadow-outline" id="username" type="text" placeholder="Username">
<div class="absolute right-0 inset-y-0 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-500" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
</div>

  </div>
  <p class="mt-1 text-sm text-green-600 font-light">Saved.</p>
                    
                

                    
                         <div class="relative">
    <input
      class="appearance-none border-2 border-red-300 bg-red-50 transition-colors rounded-md w-full py-2 px-3 text-gray-8w00 leading-tight focus:outline-none focus:ring-red-500 focus:border-red-500 focus:shadow-outline"
      id="username"
      type="text"
      placeholder="Username"
    />
    <div class="absolute right-0 inset-y-0 flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 text-red-500 mr-2"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
    </div>
  </div>
                    
                

                    
                         <div class="relative">
      <input class="appearance-none border-2 border-gray-300 hover:border-gray-400 transition-colors rounded-md w-full py-2 px-3 text-gray-800 leading-tight focus:outline-none focus:ring-purple-600 focus:border-purple-600 focus:shadow-outline" id="username" type="text" placeholder="Username">
      <div class="absolute right-0 inset-y-0 flex items-center">
        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-purple-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </div>
  </div>
                    
                

                    
                         <input class="appearance-none border-2 border-gray-300 hover:border-gray-400 transition-colors rounded-md w-full py-2 px-3 text-gray-800 leading-tight focus:outline-none focus:ring-purple-600 focus:border-purple-600 focus:shadow-outline" id="defaultInput" type="text" placeholder="Default input">
                    
                

                    
                         <div class="rounded-lg bg-white shadow-lg p-16">
  <div class="flex justify-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-10 w-10 text-indigo-800"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
      />
    </svg>
  </div>

  <div class="text-center mt-2">
    <h1 class="text-purple-900 font-bold text-2xl">Modal Card Example</h1>
    <p class="text-gray-500 mt-3">
      You could also insert centered tabs to make this modal even more
      versatile.
    </p>

    <div class="mt-6">
      <ul
        class="flex justify-center space-x-6 text-indigo-800 border-b border-purple-50"
      >
        <li class="border-b-2 pb-3 border-indigo-600">One</li>
        <li>Two</li>
        <li>Forty Six</li>
      </ul>
    </div>

    <div class="py-8 border-b border-indigo-50">
      Content
    </div>
  </div>

  <div class="flex justify-center mt-8">
    <button
      class="text-white py-2 px-4 rounded-lg bg-purple-700 hover:bg-purple-600 shadow-md font-medium  transition-colors"
    >
      Save
    </button>
  </div>
</div>
                    
                

                    
                         <div class="p-8 space-y-8">
  <div class="bg-indigo-800 p-8 rounded-lg">
    <ul class="text-white">
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Pilot</li>
      <li class="px-4 py-2 bg-indigo-700 hover:bg-indigo-900 rounded-lg">
        Titan
      </li>
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Timelines</li>
    </ul>

    <p class="text-pink-500 font-bold my-3">Training:</p>
    <ul class="pl-4 border-l-2 border-indigo-700 text-white">
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Basic maneuver</li>
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Gaunlet</li>
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Neural Link 101</li>
    </ul>
  </div>

  <!-- Inverted -->
  <div class="p-8 rounded-lg">
    <ul class="text-indigo-800">
      <li class="px-4 py-2 hover:bg-indigo-50 rounded-lg">Pilot</li>
      <li class="px-4 py-2 bg-indigo-800 text-white rounded-lg">Titan</li>
      <li class="px-4 py-2 hover:bg-indigo-50 rounded-lg">Timelines</li>
    </ul>

    <p class="text-indigo-600 font-bold my-3">Training:</p>
    <ul class="pl-4 border-l-2 border-indigo-100 text-indigo-900">
      <li class="px-4 py-2 hover:bg-indigo-900  hover:text-white rounded-lg">Basic maneuver</li>
      <li class="px-4 py-2 hover:bg-indigo-900  hover:text-white rounded-lg">Gaunlet</li>
      <li class="px-4 py-2 hover:bg-indigo-900  hover:text-white rounded-lg">Neural Link 101</li>
    </ul>
  </div>
</div>
                    
                

                    
                         <div class="px-6 py-4 text-gray-700">
  Default message
</div>

<div class="px-6 py-4 bg-blue-50 rounded-lg text-blue-500">
  A regular <span class="font-bold">info</span> message
</div>

<div class="px-6 py-4 bg-yellow-50 rounded-lg text-yellow-600">
  A <span class="font-bold">warning</span> message
</div>

<div class="px-6 py-4 bg-green-50 rounded-lg text-green-500">
  A <span class="font-bold">success</span> message
</div>

<div class="px-6 py-4 bg-gray-100 rounded-lg text-gray-700">
  A <span class="font-bold">dark</span> message
</div>
                    
                

                    
                         <div
    class="p-8 text-gray-500 bg-white border border-gray-100 rounded-2xl font-medium"
  >
    <p>Bordered</p>
  </div>

  <div class="p-8 text-gray-500 bg-gray-100  rounded-2xl font-medium">
    <p>Well</p>
  </div>

  <div class="p-8 text-gray-500 bg-white  rounded-2xl font-medium">
    <p>White</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-sm border border-gray-100  rounded-2xl font-medium"
  >
    <p>Raised</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-lg border border-gray-100  rounded-2xl font-medium"
  >
    <p>Floating</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-xl border border-gray-100 rounded-2xl font-medium"
  >
    <p>Popping</p>
  </div>
                    
                

                    
                         <button
    class="bg-white py-2 px-4 rounded-lg border border-gray-200 hover:border-gray-300 text-purple-900 shadow-md font-medium transition-colors"
  >
    Default
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-purple-700 hover:bg-purple-600 shadow-md font-medium  transition-colors"
  >
    Primary
  </button>

  <button
    class="text-purple-900 py-2 px-4 rounded-lg hover:bg-gray-100 font-medium transition-colors"
  >
    Text
  </button>

  <button
    class="text-purple-900 py-2 px-4 rounded-lg hover:underline font-medium transition-colors"
  >
    Ghost
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-purple-900 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Dark
  </button>

  <button
    class="text-purple-700 py-2 px-4 rounded-lg bg-purple-100 hover:bg-purple-200 font-medium transition-colors"
  >
    Light
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-green-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Success
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-blue-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Info
  </button>

  <button
    class="text-black py-2 px-4 rounded-lg bg-yellow-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Info
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-red-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Danger
  </button>