TailwindTemplates

Recently added

Argon Pagination

Copied!

                    
                         <!-- 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>
                    
                

Argon Tabs with Icons

Copied!

                    
                         <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>
                    
                

Argon Tabs

Copied!

                    
                         <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>
                    
                

Argon Rounded Icon Button

Copied!

                    
                         <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>
                    
                

Argon Icon button

Copied!

                    
                         <!-- 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>
                    
                

Argon Link Buttons

Copied!

                    
                         <!-- Primary -->
<button
  class="text-indigo-500 py-2 px-4 uppercase font-medium "
>
  Primary
</button>

<!-- Info -->
<button
  class="text-blue-500 py-2 px-4 uppercase font-medium "
>
  Info
</button>


<!-- Success -->
<button
  class="text-green-500 py-2 px-4 uppercase font-medium "
>
  Success
</button>


<!-- Danger -->
<button
  class="text-red-500 py-2 px-4 uppercase font-medium "
>
  Danger
</button>


<!-- Warning -->
<button
  class="text-yellow-500 py-2 px-4 uppercase font-medium "
>
  Warning
</button>


<!-- Default -->
<button
  class="text-gray-800-500 py-2 px-4 uppercase font-medium "
>
  Default
</button>


<!-- Secondary -->
<button
  class="text-gray-500 py-2 px-4 uppercase font-medium "
>
  Secondary
</button>
                    
                

Argon Outline Buttons

Copied!

                    
                         <!-- Primary -->
<button
  class="text-indigo-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-indigo-500 hover:bg-indigo-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Primary
</button>

<!-- Info -->
<button
  class="text-blue-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-blue-500 hover:bg-blue-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Info
</button>


<!-- Success -->
<button
  class="text-green-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-green-500 hover:bg-green-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Success
</button>


<!-- Danger -->
<button
  class="text-red-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-red-500 hover:bg-red-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Danger
</button>


<!-- Warning -->
<button
  class="text-yellow-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-yellow-500 hover:bg-yellow-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Warning
</button>


<!-- Default -->
<button
  class="text-gray-600 hover:text-white py-2 px-4 uppercase rounded bg-white border border-gray-600 hover:bg-gray-700 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Default
</button>


<!-- Secondary -->
<button
  class="text-gray-500 hover:text-gray-700 py-2 px-4 uppercase rounded bg-white border border-gray-200 hover:bg-gray-200 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Secondary
</button>
                    
                

Argon Default Buttons

Copied!

                    
                         <!-- Primary -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-indigo-500 hover:bg-indigo-600 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Primary
</button>

<!-- Info -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-blue-400 hover:bg-blue-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Info
</button>

<!-- Success -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-green-400 hover:bg-green-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Success
</button>

<!-- Danger -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-red-400 hover:bg-red-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Danger
</button>

<!-- Warning -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-yellow-400 hover:bg-yellow-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Warning
</button>

<!-- Default -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-gray-700 hover:bg-gray-800 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Default
</button>

<!-- Secondary -->
<button
  class="py-2 px-4 uppercase rounded bg-gray-100 hover:bg-gray-200 text-gray-700 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Secondary
</button>
                    
                

Biings Boxed Tabs

Copied!

                    
                         <div class="p-8">
  <ul class="grid grid-flow-col text-center text-gray-500  p-1">
    <li>
      <a href="#page1" class="flex justify-center py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center bg-white rounded-tl-lg rounded-tr-lg border-l border-t border-r border-gray-100 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center py-4">Settings</a>
    </li>
  </ul>
  <div class="bg-white shadow border border-gray-100 p-8 text-gray-700 rounded-lg -mt-2">
    Boxed content
  </div>
</div>
                    
                

Biings Tabs Rounded full

Copied!

                    
                         <ul class="grid grid-flow-col text-center text-gray-500 bg-gray-100 rounded-full p-1">
    <li>
      <a href="#page1" class="flex justify-center py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center bg-white rounded-full shadow text-indigo-900 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center py-4">Settings</a>
    </li>
  </ul>