A customizable pulsegrid info card component built with Tailwind CSS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis ligula.
To use this component in your project, copy the code and paste it into your HTML file. You can customize the component by modifying the Tailwind CSS classes.
<div
class="relative flex w-80 flex-col rounded-xl bg-gradient-to-br from-white to-gray-50 bg-clip-border text-gray-700 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
>
<div
class="relative mx-4 -mt-6 h-40 overflow-hidden rounded-xl bg-clip-border shadow-lg group"
>
<div
class="absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-600 opacity-90"
></div>
<div
class="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:20px_20px] animate-pulse"
></div>
<div class="absolute inset-0 flex items-center justify-center">
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="w-20 h-20 text-white/90 transform transition-transform group-hover:scale-110 duration-300"
>
<path
d="M12 2L1 21h22L12 2zm0 3.83L19.17 19H4.83L12 5.83zM11 16h2v2h-2zm0-6h2v4h-2z"
></path>
</svg>
</div>
</div>
<div class="p-6">
<h5
class="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-gray-900 antialiased group-hover:text-blue-600 transition-colors duration-300"
>
Tailwind card
</h5>
<p
class="block font-sans text-base font-light leading-relaxed text-gray-700 antialiased"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis
ligula.
</p>
</div>
<div class="p-6 pt-0">
<button
class="group relative w-full inline-flex items-center justify-center px-6 py-3 font-bold text-white rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 shadow-lg shadow-blue-500/30 hover:shadow-blue-500/40 transition-all duration-300 hover:-translate-y-0.5"
>
<span class="relative flex items-center gap-2">
Read More
<svg
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
class="w-5 h-5 transform transition-transform group-hover:translate-x-1"
>
<path
d="M17 8l4 4m0 0l-4 4m4-4H3"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
</span>
</button>
</div>
</div>This component is fully responsive and adapts to different screen sizes. Use the viewport controls above to preview how it looks on different devices.
Optimized for screens smaller than 640px
Optimized for screens between 640px and 1024px
Optimized for screens larger than 1024px