Luxe Glow Product Card

A customizable luxe glow product card component built with Tailwind CSS.

TailWrap.dev/preview

CHAMONILLE

NATURAL, OIL

39.00 MLC

Perfect everywhere

Usage

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.

Copy the code

Paste into your project

Customize as needed

HTML


    <div class="card  text-gray-300 w-[clamp(260px,80%,300px)] hover:brightness-90 transition-all cursor-pointer group bg-gradient-to-tl from-gray-900 to-gray-950 hover:from-gray-800 hover:to-gray-950 border-r-2 border-t-2 border-gray-900 m-auto rounded-lg overflow-hidden relative">
      <div class="px-8 py-10">
        <div class="bg-orange-500 w-10 h-10 rounded-full rounded-tl-none mb-4 group-hover:-translate-y-1 group-hover:shadow-xl group-hover:shadow-red-900 transition-all"></div>
        <div class="uppercase font-bold text-xl">
          CHAMONILLE
        </div>
        <div class="text-gray-300 uppercase tracking-widest">
          NATURAL, OIL
        </div>
        <div class="text-gray-400 mt-8">
          <p class="font-bold">39.00 MLC</p>
          <p>Perfect everywhere</p>
        </div>
      </div>
      <div class="h-2 w-full bg-gradient-to-l via-yellow-500 group-hover:blur-xl blur-2xl m-auto rounded transition-all absolute bottom-0"></div>
      <div class="h-0.5 group-hover:w-full bg-gradient-to-l  via-yellow-950 group-hover:via-yellow-500 w-[70%] m-auto rounded transition-all"></div>
    </div>

Tailwind CSS v3.3

Responsive Behavior

This component is fully responsive and adapts to different screen sizes. Use the viewport controls above to preview how it looks on different devices.

Mobile

Optimized for screens smaller than 640px

Tablet

Optimized for screens between 640px and 1024px

Desktop

Optimized for screens larger than 1024px