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.
Showing
1
to
10
of
19
results
Biings Boxed Tabs
<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
<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
<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
<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
<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
<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 border-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
<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 border-transparent focus:outline-none text-gray-700"
/>
</label>
Biings Input Field
<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 border-transparent focus:outline-none text-gray-700"
/>
</label>
Biings Input with 1 icon
<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
<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>
Showing
1
to
10
of
19
results