Skip to content

Instantly share code, notes, and snippets.

@VityaSchel

VityaSchel/unity-ui-kit.html

Last active October 2, 2024 01:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VityaSchel/c79724dc727e4f17df61c82d6ab76648 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VityaSchel/c79724dc727e4f17df61c82d6ab76648 to your computer and use it in GitHub Desktop.
Download ZIP
Unity 2017 button, checkbox and button group with tailwind
Raw
unity-ui-kit.html
<div class="flex flex-col items-start gap-8 p-8">
<!-- Checkbox -->
<div class="flex items-center gap-1.5">
<div class="relative">
<input type="checkbox" class="peer absolute z-[10] h-[12px] w-[12px] opacity-0" id="my_checkbox_1" />
<div class="h-[12px] w-[12px] rounded-[2px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] peer-active:from-[#6B6B6B] peer-active:to-[#5E5E5E]"></div>
<div class="top-px left-px absolute z-[5] h-[10px] w-[10px] bg-gradient-to-b from-[#606060] to-[#3D3D3D] peer-active:from-[#525252] peer-active:to-[#5C5C5C]"></div>
<img src="data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.06066' y1='13.9393' x2='14.0607' y2='19.9393' stroke='white' stroke-width='3'/%3E%3Cline x1='11.9765' y1='19.9034' x2='26.9765' y2='5.90342' stroke='white' stroke-width='3'/%3E%3C/svg%3E" width="14" height="14" class="absolute -top-px -left-px hidden h-[14px] min-h-[14px] w-[14px] min-w-[14px] select-none peer-checked:block z-[8]" />
</div>
<label for="my_checkbox_1" class="select-none font-[Inter] text-sm text-[#B4B4B4]">Label</label>
</div>
<!-------------->
<!-- Button -->
<button class="rounded-[4px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] group active:from-[#666666] active:to-[#5A5A5A]">
<div class="rounded-[3px] bg-gradient-to-b from-[#5E5E5E] to-[#3C3C3C] px-12 py-[3px] font-[Inter] text-sm font-light text-[#B4B4B4] group-active:from-[#4D4D4D] group-active:to-[#5A5A5A]">Add Component</div>
</button>
<!------------>
<!-- Button group -->
<div class="flex h-[21px] shadow-[0px_1px_1px_1px_#2B2B2B] [&>*:first-child]:rounded-s-[4px] [&>*:first-child>div]:rounded-s-[3px] [&>*:last-child]:rounded-e-[4px] [&>*:last-child>div]:rounded-e-[3px] [&>*::after]:content-[''] [&>*::after]:absolute [&>*::after]:bg-[rgba(0,0,0,0.35)] [&>*::after]:w-px [&>*::after]:h-[calc(100%-2px)] [&>*]:relative [&>*::after]:top-[1px] [&>*::after]:right-0 rounded-[4px] [&>*:last-child::after]:opacity-0">
<button class="bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]">
<div class="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M188 80a27.8 27.8 0 0 0-13.36 3.4a28 28 0 0 0-46.64-11A28 28 0 0 0 80 92v20H68a28 28 0 0 0-28 28v12a88 88 0 0 0 176 0v-44a28 28 0 0 0-28-28m12 72a72 72 0 0 1-144 0v-12a12 12 0 0 1 12-12h12v24a8 8 0 0 0 16 0V92a12 12 0 0 1 24 0v28a8 8 0 0 0 16 0V92a12 12 0 0 1 24 0v28a8 8 0 0 0 16 0v-12a12 12 0 0 1 24 0Z"></path></svg>
</div>
</button>
<button class="bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]">
<div class="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 2l4 4h-3v7.85l6.53 3.76L21 15.03l1.5 5.47l-5.5 1.46l1.53-2.61L12 15.58l-6.53 3.77L7 21.96L1.5 20.5L3 15.03l1.47 2.58L11 13.85V6H8z"></path></svg>
</div>
</button>
<button class="bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]">
<div class="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fillRule="evenodd" d="M8 1.5a6.5 6.5 0 0 0-6.445 5.649a.75.75 0 1 0 1.488.194A5.001 5.001 0 0 1 11.57 4.5h-1.32a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 .75-.75v-3a.75.75 0 0 0-1.5 0v1.06A6.48 6.48 0 0 0 8 1.5m-5.25 13a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5H4.43a5.001 5.001 0 0 0 8.528-2.843a.75.75 0 1 1 1.487.194A6.501 6.501 0 0 1 3.5 12.691v1.059a.75.75 0 0 1-.75.75" clipRule="evenodd"></path></svg>
</div>
</button>
</div>
<!------------>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment