mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
68 lines
No EOL
3.6 KiB
HTML
68 lines
No EOL
3.6 KiB
HTML
<!-- From Uiverse.io by RashadGhzi - Tags: simple, card, hover effect, tailwindcss -->
|
|
<div
|
|
class="card font-sans bg-white rounded-lg overflow-hidden w-96 transform transition duration-500 hover:shadow-2xl"
|
|
>
|
|
<div
|
|
class="p-4 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white"
|
|
>
|
|
<div class="flex justify-between items-center">
|
|
<div class="text-lg font-montserrat font-bold">Social Media</div>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="hover:text-gray-200">
|
|
<svg
|
|
class="w-6 h-6 scale-100 ease-out transistion duration-300 hover:scale-75"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M22.675 0H1.325C.593 0 0 .592 0 1.326v21.348C0 23.406.592 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.896-4.788 4.66-4.788 1.325 0 2.462.099 2.794.143v3.239h-1.918c-1.505 0-1.795.716-1.795 1.764v2.315h3.588l-.467 3.622h-3.121V24h6.116c.73 0 1.325-.594 1.325-1.326V1.326C24 .592 23.408 0 22.675 0"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="hover:text-gray-200">
|
|
<svg
|
|
class="w-6 h-6 w-6 h-6 scale-100 ease-out transistion duration-300 hover:scale-75"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M23.954 4.569c-.885.392-1.83.656-2.825.775a4.93 4.93 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-8.384 4.482A13.94 13.94 0 011.671 3.149a4.916 4.916 0 001.524 6.574 4.902 4.902 0 01-2.228-.616c-.054 2.28 1.581 4.415 3.95 4.89a4.932 4.932 0 01-2.224.084c.623 1.941 2.432 3.355 4.578 3.396A9.867 9.867 0 010 21.543a13.933 13.933 0 007.548 2.209c9.058 0 14.01-7.503 14.01-14.01 0-.213 0-.426-.015-.637a10.012 10.012 0 002.457-2.548l-.047-.02z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="hover:text-gray-200">
|
|
<svg
|
|
class="w-6 h-6 w-6 h-6 scale-100 ease-out transistion duration-300 hover:scale-75"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12.004 2.029C6.475 2.029 2.005 6.499 2.005 12.027c0 4.432 2.869 8.19 6.84 9.514.5.092.684-.217.684-.482 0-.24-.008-.874-.013-1.716-2.782.606-3.37-1.34-3.37-1.34-.454-1.152-1.11-1.459-1.11-1.459-.907-.62.069-.607.069-.607 1.003.071 1.532 1.03 1.532 1.03.89 1.526 2.337 1.085 2.906.83.091-.646.35-1.085.636-1.334-2.22-.253-4.555-1.11-4.555-4.942 0-1.091.39-1.983 1.029-2.682-.103-.253-.447-1.273.098-2.655 0 0 .84-.268 2.75 1.026A9.55 9.55 0 0112 6.856a9.55 9.55 0 012.506.338c1.908-1.294 2.746-1.026 2.746-1.026.547 1.382.203 2.402.1 2.655.64.699 1.027 1.591 1.027 2.682 0 3.842-2.339 4.685-4.566 4.934.36.31.68.922.68 1.856 0 1.34-.012 2.421-.012 2.75 0 .267.181.579.689.48 3.973-1.325 6.837-5.083 6.837-9.514 0-5.528-4.471-9.998-9.996-9.998z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 font-montserrat">
|
|
<div class="text-black text-xl font-bold mb-2">Advanced 3D Card</div>
|
|
<div class="text-gray-700 mb-4">
|
|
This card showcases complex animations and 3D effects using Tailwind CSS.
|
|
Hover to see the interaction!
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="inline-block font-mono text-sm font-bold bg-slate-500 text-white py-2 px-4 rounded-full transition duration-100 transform hover:opacity-75"
|
|
>Learn More</a
|
|
>
|
|
</div>
|
|
<div class="p-4 bg-gray-100 text-center">
|
|
<div class="text-gray-600 font-mono text-sm">© 2024 Your Company</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|