Button by 0x3ther
#e8e8e8
HTML +TailwindCSS
1<div class="flex items-center gap-2"> 2 <button 3 class="relative inline-flex items-center justify-center gap-2 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white hover:bg-[#F5F5F5] h-9 rounded-md px-3 group" 4 > 5 <svg 6 class="lucide lucide-arrow-left" 7 stroke-linejoin="round" 8 stroke-linecap="round" 9 stroke-width="2" 10 stroke="currentColor" 11 fill="none" 12 viewBox="0 0 24 24" 13 height="22" 14 width="22" 15 xmlns="http://www.w3.org/2000/svg" 16 > 17 <path d="m12 19-7-7 7-7"></path> 18 <path d="M19 12H5"></path> 19 </svg> 20 <span class="origin-left scale-0 transition-transform group-hover:scale-100" 21 >Back</span 22 > 23 </button> 24 <button 25 class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#06B6D4] h-9 rounded-md px-3" 26 > 27 <svg 28 class="lucide lucide-rocket text-cyan-500 dark:text-cyan-400" 29 stroke-linejoin="round" 30 stroke-linecap="round" 31 stroke-width="2" 32 stroke="#06B6D4" 33 fill="none" 34 viewBox="0 0 24 24" 35 height="22" 36 width="22" 37 xmlns="http://www.w3.org/2000/svg" 38 > 39 <path 40 d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" 41 ></path> 42 <path 43 d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" 44 ></path> 45 <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path> 46 <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path> 47 </svg> 48 Dashboard 49 </button> 50 <button 51 class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#60A5FA] h-9 rounded-md px-3" 52 > 53 <svg 54 class="lucide lucide-newspaper text-blue-400 dark:text-blue-600" 55 stroke-linejoin="round" 56 stroke-linecap="round" 57 stroke-width="2" 58 stroke="#60A5FA" 59 fill="none" 60 viewBox="0 0 24 24" 61 height="22" 62 width="22" 63 xmlns="http://www.w3.org/2000/svg" 64 > 65 <path 66 d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" 67 ></path> 68 <path d="M18 14h-8"></path> 69 <path d="M15 18h-5"></path> 70 <path d="M10 6h8v4h-8V6Z"></path> 71 </svg> 72 Articles 73 </button> 74 <button 75 class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FACC14] h-9 rounded-md px-3" 76 > 77 <svg 78 class="lucide lucide-sticky-note text-yellow-400 dark:text-yellow-600" 79 stroke-linejoin="round" 80 stroke-linecap="round" 81 stroke-width="2" 82 stroke="#FACC14" 83 fill="none" 84 viewBox="0 0 24 24" 85 height="22" 86 width="22" 87 xmlns="http://www.w3.org/2000/svg" 88 > 89 <path 90 d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z" 91 ></path> 92 <path d="M15 3v6h6"></path> 93 </svg> 94 Notes 95 </button> 96 <button 97 class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FB923C] h-9 rounded-md px-3" 98 > 99 <svg 100 class="lucide lucide-star text-orange-400 dark:text-orange-600" 101 stroke-linejoin="round" 102 stroke-linecap="round" 103 stroke-width="2" 104 stroke="#FB923C" 105 fill="#FB923C" 106 viewBox="0 0 24 24" 107 height="22" 108 width="22" 109 xmlns="http://www.w3.org/2000/svg" 110 > 111 <polygon 112 points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" 113 ></polygon> 114 </svg> 115 Reviews 116 </button> 117</div> 118
960 views
960 views
MIT License