Edit HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Button</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="min-h-screen bg-blue-600 flex justify-center items-center"> <!-- button goes here --> <a href="https://example.com" class="relative font-thin text-xl"> <!-- background goes here --> <div class="absolute inset-x-0 h-full rounded-lg -bottom-2 bg-gray-100 border border-gray-500"></div> <!-- Text here --> <div class="relative bg-gray-100 py-5 px-10 rounded-lg border border-gray-500 transition transform duration-200 hover:translate-y-2">Click Me!</div> </a> </div> </body> </html>
Back to Home

Preview

URL:
https://snipzard.com/site/html_64883b0f4c76f.html