mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
92 lines
No EOL
3 KiB
HTML
92 lines
No EOL
3 KiB
HTML
<!-- From Uiverse.io by hoshikawamaki - Tags: simple, button, checkbox, label, tailwindcss, rightbottom, peer -->
|
|
<label for="tool_button" class="relative w-8 h-20 py-2">
|
|
<input type="checkbox" id="tool_button" class="hidden peer" />
|
|
<div
|
|
class="flex items-center h-full bg-purple-400 rounded-lg w-72 -right-64 peer-checked:right-3 p-0.5 shadow-[0_2px_10px_rgba(0,0,0,0.24)] absolute transition-all duration-300 cursor-pointer"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
fill="#fff"
|
|
stroke="#fff"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="ml-0.5 feather feather-more-vertical"
|
|
>
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
</svg>
|
|
<div
|
|
class="flex flex-row items-center justify-center w-full h-full bg-purple-300 border border-purple-400 rounded-lg"
|
|
>
|
|
<div class="flex flex-col items-center justify-center flex-grow">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#9370DB"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="feather feather-twitter"
|
|
>
|
|
<path
|
|
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
|
|
></path>
|
|
</svg>
|
|
<p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
|
|
Twitter
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center flex-grow">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#9370DB"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="feather feather-twitch"
|
|
>
|
|
<path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"></path>
|
|
</svg>
|
|
<p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
|
|
Twitch
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center flex-grow">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#9370DB"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="feather feather-triangle"
|
|
>
|
|
<path
|
|
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
|
|
></path>
|
|
</svg>
|
|
<p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
|
|
Go top
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
|
|
|