bg-gradient-to-r from-green-400 to-blue-500
text-white text-center italic
px-4 py-2 rounded cursor-default
transition-all duration-400
hover:rounded-2xl
dark:(from-teal-400 to-yellow-500)
.bg-gradient-to-r { background-image: -o-linear-gradient(left, var(--tw-gradient-stops)); background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops))); background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .from-green-400 { --tw-gradient-from: rgba(52, 211, 153, var(--tw-from-opacity, 1)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); } .dark .dark\:from-teal-400 { --tw-gradient-from: rgba(45, 212, 191, var(--tw-from-opacity, 1)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); } .to-blue-500 { --tw-gradient-to: rgba(59, 130, 246, var(--tw-to-opacity, 1)); } .dark .dark\:to-yellow-500 { --tw-gradient-to: rgba(245, 158, 11, var(--tw-to-opacity, 1)); } .rounded { border-radius: 0.25rem; } .hover\:rounded-2xl:hover { border-radius: 1rem; } .cursor-default { cursor: default; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .text-center { text-align: center; } .text-white { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } .italic { font-style: italic; } .transition-all { -webkit-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; -o-transition-duration: 150ms; transition-duration: 150ms; } .duration-400 { -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; }