TailwindTemplates

Recently added

Orbit Button Rounded

Copied!

                    
                         <button type="submit" class="inline-flex items-center justify-center space-x-2 border border-transparent text-sm font-medium rounded-full w-12 h-12 text-white bg-green-600 hover:bg-green-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
  <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
  <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
</svg>
</button>
                    
                

Orbit Subtle Button

Copied!

                    
                         <button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-green-600 hover:text-green-700 bg-green-50 hover:bg-green-100 transition-colors">
<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 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
  <div>Button</div>
</button>
                    
                

Orbit Button Icon

Copied!

                    
                         <!-- left -->
<button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">
  <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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <div>Default button</div>
</button>

<!-- Right -->
<button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">
  <div>Default button</div>
  <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="M19 9l-7 7-7-7" />
  </svg>
</button>




<!-- Both sides -->

<button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">
  <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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <div>Default button</div>
  <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="M19 9l-7 7-7-7" />
  </svg>
</button>
                    
                

Orbit Default Button

Copied!

                    
                         <button type="submit" class="inline-flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">Default button</button>
                    
                

Lexicon Pagination bar

Copied!

                    
                         <div class="flex flex-col lg:flex-row justify-between">
    <div class="flex flex-col lg:flex-row items-center space-x-2 text-xs">
      <button class="py-2 px-4 bg-white text-gray-600 font-medium rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center">
        10 items
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>

      <p class="text-gray-500 mt-4 lg:mt-0">Showing 11 to 20 of 95 entires</p>
    </div>

    <nav aria-label="Pagination" class="flex justify-center items-center text-gray-600 mt-8 lg:mt-0">
      <a href="#" class="p-2 mr-4 rounded hover:bg-gray-100">
        <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="M15 19l-7-7 7-7" />
        </svg>
      </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 1 </a>
      <a href="#" class="px-4 py-2 rounded bg-gray-200 text-gray-900 font-medium hover:bg-gray-100"> 2 </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 3 </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> ... </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 9 </a>
      <a href="#" class="p-2 ml-4 rounded hover:bg-gray-100">
        <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="M9 5l7 7-7 7" />
        </svg>
      </a>
    </nav>
  </div>
                    
                

Lexicon Simple Pagination

Copied!

                    
                         <nav aria-label="Pagination" class="flex items-center text-gray-600">
    <a href="#" class="p-2 mr-4 rounded hover:bg-gray-100">
      <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="M15 19l-7-7 7-7" />
      </svg>
    </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 1 </a>
    <a href="#" class="px-4 py-2 rounded bg-gray-200 text-gray-900 font-medium hover:bg-gray-100"> 2 </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 3 </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> ... </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 9 </a>
    <a href="#" class="p-2 ml-4 rounded hover:bg-gray-100">
      <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="M9 5l7 7-7 7" />
      </svg>
    </a>
  </nav>
                    
                

Lexicon Input groups with units

Copied!

                    
                         <div class="inline-block 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 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>
                    
                

Lexicon URL input group

Copied!

                    
                         <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 py-1 text-gray-600 px-4 focus:outline-none"
  />
</div>
                    
                

Lexicon Input group with button

Copied!

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

Lexicon Text Area With message

Copied!

                    
                         <div>
  <label for="input1" class="text-sm text-gray-800 block mb-1 font-medium">
    Comments
  </label>
  <textarea
    rows="4"
    cols="50"
    type="password"
    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 password"
  ></textarea>
  <div class="flex items-center mt-1">
    <p class="text-xs text-gray-500">Help Message</p>
  </div>
</div>