Skip to content

Instantly share code, notes, and snippets.

@adarsh-gupta101

adarsh-gupta101/TailwindCSS-example.html

Created May 13, 2025 12:58
Show Gist options
  • Save adarsh-gupta101/13f4b103a69b2bb68d2ad673fe274dcc to your computer and use it in GitHub Desktop.
Save adarsh-gupta101/13f4b103a69b2bb68d2ad673fe274dcc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
TailwindCSS-example.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative flex flex-col justify-center min-h-screen bg-gray-50 overflow-hidden py-6 sm:py-12">
<img src="https://play.tailwindcss.com/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-none w-full h-auto" width="1308" />
<div class="absolute w-full md:w-1/2 m-auto mt-16 md:mt-0 bg-white rounded-xl drop-shadow-2xl shadow-xl overflow-hidden mx-4 md:mx-64">
<div class="flex flex-col justify-center items-center">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-full" src="https://www.lambdatest.com/resources/images/real-time-browsers-index.png" alt="Avatar">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Cross Browser Testing On Desktop And Mobile Browsers</div>
<p class="mt-2 text-gray-500">You can choose from a wide range of Windows and Mac operating systems, along with all legacy and latest browsers. Also test your website or web app on latest mobile browsers with Android and iOS mobile operating systems.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment