This post is saved as a draft.
#e8e8e8
HTML +TailwindCSS
1<label 2 for="nav_bar_icon" 3 class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center space-y-1.5" 4> 5 <input id="nav_bar_icon" type="checkbox" class="hidden peer" /> 6 <div 7 class="w-2/3 h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-right peer-checked:w-full peer-checked:rotate-[-30deg] peer-checked:translate-y-[-5px]" 8 ></div> 9 <div 10 class="w-full h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-center peer-checked:rotate-90 peer-checked:translate-x-4" 11 ></div> 12 <div 13 class="w-2/3 h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-right peer-checked:w-full peer-checked:rotate-[30deg] peer-checked:translate-y-[5px]" 14 ></div> 15</label> 16
Variation of aswitch
Variation of aswitch