[Creating a shine effect on a card with Tailwind CSS] Card に輝きの効果をつける #react #tailwind #css

CardShineEffect.jsx

/*
  Creating a shine effect on a card with Tailwind CSS
  https://www.julienthibeaut.xyz/blog/create-shine-effect-on-card-with-tailwind-css?utm_campaign=tailwind-weekly-121&utm_source=Tailwind+Weekly
*/
export const CardShineEffect = () => {
  return (
    <div className="bg-[linear-gradient(45deg,transparent_25%,rgba(68,68,68,.2)_50%,transparent_75%,transparent_100%)] bg-zinc-950 relative max-w-md overflow-hidden rounded-xl border border-slate-900 bg-[length:250%_250%,100%_100%] bg-[position:-100%_0,0_0] bg-no-repeat px-8 py-16 shadow-2xl transition-[background-position_0s_ease] hover:bg-[position:200%_0,0_0] hover:duration-[1500ms]">
      <span className="mb-4 inline-flex items-center justify-center rounded-md bg-blue-600 p-2 shadow-lg">
        <svg
          className="h-6 w-6 text-white"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          aria-hidden="true"
        />
      </span>
      <h3 className="mb-2 font-medium tracking-tight text-white">Hello!</h3>
      <p className="text-sm text-slate-400">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex
        obcaecati natus eligendi delectus, cum deleniti sunt in labore nihil
        quod quibusdam expedita nemo.
      </p>
    </div>
  )
}