TailwindTemplates

Theme

Biings

Biings Design System is a series of assets and guidelines for building consistent user experiences at Biings. This design system is open-source under a CC BY 4.0 License.

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>
                    
                

Biings Tabs Rounded

Copied!

                    
                         <ul class="grid grid-flow-col text-center text-gray-500 bg-gray-100 rounded-lg 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-lg 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>
                    
                

Biings Hanging Tabs

Copied!

                    
                         <ul class="grid grid-flow-col text-center text-gray-500">
    <li>
      <a href="#page1" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center border-t-4 text-indigo-600 border-indigo-600 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Settings</a>
    </li>
  </ul>
                    
                

Biings Tabs

Copied!

                    
                         <ul class="grid grid-flow-col text-center border-b border-gray-200 text-gray-500">
    <li>
      <a href="#page1" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Settings</a>
    </li>
  </ul>
                    
                

Biings input field: Required

Copied!

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 relative focus-within:text-purple-800 bg-white transition-colors rounded-md block border-2 border-gray-200 focus-within:border-purple-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent focus:outline-none text-gray-700"
  />
  <div class="absolute left-0 inset-y-0 flex items-center -ml-2 mt-8">
  <span class="flex h-3 w-3 relative">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
  </div>
</span>
</label>
                    
                

Biings input field: Error

Copied!

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 focus-within:text-purple-800 caret-red-500 bg-white transition-colors rounded-md block border-2 border-red-400 focus-within:border-red-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent focus:outline-none text-gray-700"
  />
</label>
                    
                

Biings Input Field

Copied!

                    
                         <label
    for="input1"
    class="p-4 text-gray-800 focus-within:text-purple-800 bg-white transition-colors rounded-md block border-2 border-gray-200 focus-within:border-purple-600"
  >
    <p class="mb-2 ">Name</p>
    <input
      type="text"
      id="input1"
      placeholder="Your name..."
      class="w-full bg-transparent focus:outline-none text-gray-700"
    />
  </label>
                    
                

Biings Input with 1 icon

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border-2 pl-10 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="Search..."
  />
  <div class="absolute left-0 inset-y-0 flex items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 ml-3 text-gray-400 hover:text-gray-500"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
      />
    </svg>
  </div>
</div>
                    
                

Biings Input with 2 icons

Copied!

                    
                         <div class="relative">
    <input
      class="appearance-none border-2 pl-10 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="Search..."
    />
    <div class="absolute right-0 inset-y-0 flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="-ml-1 mr-3 h-5 w-5 text-gray-400 hover:text-gray-500"
        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>
    </div>

    <div class="absolute left-0 inset-y-0 flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 ml-3 text-gray-400 hover:text-gray-500"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        />
      </svg>
    </div>
  </div>