<div class="relative">
  <input
    class="appearance-none border placeholder-green-500 focus:placeholder-gray-600 border-green-300 hover:border-green-400 transition-colors rounded-md w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:ring-gray-600 focus:border-gray-400 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Success"
  />
  <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-3 bg-green-500 rounded-full text-white p-1"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M5 13l4 4L19 7"
      />
    </svg>
  </div>
</div>
                    
                

                    
                         <input
    class="appearance-none border border-gray-100 bg-white shadow-sm transition focus:shadow-md rounded-md w-full p-3 text-gray-800 leading-tight focus:outline-none focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Regular"
  />
                    
                

                    
                         <input
    class="appearance-none border border-gray-300 hover:border-gray-400 transition-colors rounded-md w-full p-3 text-gray-800 leading-tight focus:outline-none focus:ring-gray-600 focus:gray-purple-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Regular"
  />
                    
                

                    
                         <!-- Success -->
<div class="px-8 py-6 bg-green-400 text-white flex justify-between rounded">
    <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" viewBox="0 0 20 20" fill="currentColor">
            <path
                d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
            />
        </svg>
        <p>Success! This is a success alert—check it out!</p>
    </div>
    <button class="text-green-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

<!-- Info -->
<div class="px-8 py-6 bg-blue-400 text-white flex justify-between rounded">
    <div class="flex items-center">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" viewBox="0 0 20 20" fill="currentColor">
  <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
        <p>Info! This is an info alert—check it out!</p>
    </div>
    <button class="text-blue-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

<!-- Warning -->
<div class="px-8 py-6 bg-yellow-400 text-white flex justify-between rounded">
    <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" viewBox="0 0 20 20" fill="currentColor">
  <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
        <p>Warning! This is a warning alert—check it out!</p>
    </div>
    <button class="text-yellow-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

<!-- Danger -->
<div class="px-8 py-6 bg-red-400 text-white flex justify-between rounded">
    <div class="flex items-center">
   <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" 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>
        <p>Danger! This is an error alert—check it out!</p>
    </div>
    <button class="text-red-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>
                    
                

                    
                         <!-- Default -->
<span class="bg-gray-800 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Default</span>
<!-- Primary -->
 <span class="bg-indigo-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Primary</span>
<!-- Success -->
<span class="bg-green-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Success</span>
<!-- Danger -->
<span class="bg-red-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Danger</span>
<!-- Warning -->
<span class="bg-yellow-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Warning</span>
<!-- Info -->
<span class="bg-blue-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Info</span>
                    
                

                    
                         <!-- Pagination -->
<ul class="flex items-center space-x-1 font-light">
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">1</a>
  </li>
  <li class="border rounded-full bg-indigo-500 border-indigo-500 text-white">
    <a href="#" class="w-8 h-8 flex items-center justify-center">2</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">3</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">4</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">5</a>
  </li>
</ul>

<!-- Pagination with arrows -->
<ul class="flex items-center space-x-1 font-light">
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M15 19l-7-7 7-7"
        />
      </svg>
    </a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">1</a>
  </li>
  <li class="border rounded-full bg-indigo-500 border-indigo-500 text-white">
    <a href="#" class="w-8 h-8 flex items-center justify-center">2</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">3</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">4</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">5</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </a>
  </li>
</ul>
                    
                

                    
                         <div>
    <div class="grid grid-cols-3 gap-5">
      <button
        class="text-white p-4 rounded bg-indigo-500 shadow-md flex items-center justify-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 mr-2"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
        Home
      </button>
      <button
        class="p-4 rounded bg-white text-indigo-500 shadow-md flex items-center justify-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 mr-2"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        Profile
      </button>
      <button
        class="p-4 rounded bg-white text-indigo-500 shadow-md flex items-center justify-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 mr-2"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
          />
        </svg>
        Profile
      </button>
    </div>
    <div
      class="shadow-xl border border-gray-100 font-light p-8 rounded text-gray-500 bg-white mt-6"
    >
      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
      tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,
      williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
      dreamcatcher synth.
    </div>
  </div>
                    
                

                    
                         <div>
   <div class="grid grid-cols-3 gap-5">
      <button
         class="text-white p-4 rounded bg-indigo-500 shadow-md"
         >
      Home
      </button>
      <button
         class="p-4 rounded bg-white text-indigo-500 shadow-md"
         >
      Profile
      </button>
      <button
         class="p-4 rounded bg-white text-indigo-500 shadow-md"
         >
      Messages
      </button>
   </div>
   <div class="shadow-xl border border-gray-100 font-light p-8 rounded text-gray-500 bg-white mt-6">
      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
   </div>
</div>
                    
                

                    
                         <button
  class="text-white  p-4 uppercase rounded-full bg-indigo-500 hover:bg-indigo-600 flex items-center shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
</svg>
</button>
                    
                

                    
                         <!-- Left icon -->
  <button
  class="text-white py-2 px-4 uppercase rounded bg-indigo-500 hover:bg-indigo-600 flex items-center shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
</svg>
Left Icon
</button>

<!-- Right Icon -->
  <button
  class="text-white py-2 px-4 uppercase rounded bg-indigo-500 hover:bg-indigo-600 flex items-center shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
Right Icon
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
</svg>
</button>

<!-- Icon only -->
  <button
  class="text-white py-2 px-4 uppercase rounded bg-indigo-500 hover:bg-indigo-600 flex items-center shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
</svg>
</button>