Skip to content

Instantly share code, notes, and snippets.

@adarsh-gupta101

adarsh-gupta101/Unocss.html

Created May 13, 2025 14:47
Show Gist options
  • Save adarsh-gupta101/756055d1c72be27c38cbdbfa2354c920 to your computer and use it in GitHub Desktop.
Save adarsh-gupta101/756055d1c72be27c38cbdbfa2354c920 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Unocss.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>UnoCSS Image Gallery Example</title>
<link rel="stylesheet" href="https://unocss.com/unocss.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css"
/>
<!-- or -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css"
/>
</head>
<body class="bg-gray-700 p-6 w-11/12 m-auto">
<div class="flex flex-wrap flex-row gap-8 justify-center items-center">
<div
class="relative overflow-hidden rounded-lg shadow-xl shadow-blue-300 w-full md:w-1/3"
>
<img
src="https://www.lambdatest.com/resources/images/automation_testing_with_all_frameworks.png"
alt="Image 1"
class="w-full h-auto object-cover"
/>
<div
class="absolute inset-0 bg-gray-800 opacity-0 hover:opacity-80 transition duration-300"
>
<a
href="#"
class="absolute inset-0 flex items-center justify-center text-white font-bold text-2xl hover:text-gray-100"
>View</a
>
</div>
</div>
<div
class="relative overflow-hidden rounded-lg shadow-xl w-full md:w-1/3 shadow-pink-300"
>
<img
src="https://www.lambdatest.com/resources/images/Seamlessly.svg"
alt="Image 2"
class="w-full h-auto"
/>
<div
class="absolute inset-0 bg-gray-800 opacity-0 hover:opacity-80 transition duration-300"
>
<a
href="#"
class="absolute inset-0 flex items-center justify-center text-white font-bold text-2xl hover:text-gray-100"
>View</a
>
</div>
</div>
<div
class="relative overflow-hidden rounded-lg shadow-xl shadow-green-300 w-full md:w-1/3"
>
<img
src="https://www.lambdatest.com/resources/images/lambdatest-compliance.png"
alt="Image 3"
class="w-full h-auto"
/>
<div
class="absolute inset-0 bg-gray-800 opacity-0 hover:opacity-80 transition duration-300"
>
<a
href="#"
class="absolute inset-0 flex items-center justify-center text-white font-bold text-2xl hover:text-gray-100"
>View</a
>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment